Search code examples
cssimagebackgroundpositionresolution

Making background image out of a div and make it auto resize

I'm trying to create multiple images stack from top to bottom of the page using empty divs with background-image property applied to them, the problem is that because they don't have a size the browser acts as if they don't exist, is there a hack to fix this? when I add 'width' and 'height' of 'auto' it responses as though I'm not adding any elements to the div. If the "background-size" is set to 'cover' they stack one on top of the other. Here's a photo of a mockup of what I want my final result to look like: http://i58.tinypic.com/9uptlw.jpg

Here's the code:

/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

/* end of browser styles */

@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);

#logo {
	padding-right: 10px;
	padding-top: 10px;
}

nav {
	background: rgba(0,0,0,.7);
	padding: 5px 0;
	position: relative;
	z-index: 10px;
}
nav li {
	display: inline;
	padding: 0 20px;
}
nav ul {
	list-style-type: none;
}
nav ul a{
	text-decoration: none;
	color: white;
}

nav a:hover {
	color: rgb(207, 207, 207);
}
body {
	height: auto;
	width: auto;
}
#bg1 {
	background: url(../images/wedding.png) no-repeat center center;
	/*width: 1280px;
	height: 720px;*/
	background-size: cover;
}
#bg2 {
	background: url(../images/earrings.png) no-repeat;
	/*width: 1280px;
	height: 720px;*/
	background-size: cover;
}
#bg3 {
	background: url(../images/watch.png) no-repeat;
	/*width: 1280px;
	height: 720px;*/
	background-size: cover;
}
#bg4 {
	background: url(../images/lightning.png) no-repeat;
	/*width: 1280px;
	height: 720px;*/
	background-size: cover;
}
<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
	<head>
		<meta charset="utf-8">
		<title>SD עיצובים</title>
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<div id="wrapper">
			<header div="mainHeader">
				<nav div="mainNav">
					<ul>
						<img id="logo" src="images/title.png"/>
						<li><a href="index.html">דף הבית</a></li>
						<li><a href="about.html">אודות</a></li>
						<li><a href="jewelery.html">תכשיטים</a></li>
						<li><a href="contact.html">צור קשר</a></li>
					</ul>
				</nav>
			</header>
			<div id="bg1"></div>
			<div id="bg2"></div>
			<div id="bg3"></div>
			<div id="bg4"></div>
		</div>
	</body>
</html>

/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

/* end of browser styles */

@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);

#logo {
	padding-right: 10px;
	padding-top: 10px;
}

nav {
	background: rgba(0,0,0,.7);
	padding: 5px 0;
	position: relative;
	z-index: 10px;
}
nav li {
	display: inline;
	padding: 0 20px;
}
nav ul {
	list-style-type: none;
}
nav ul a{
	text-decoration: none;
	color: white;
}

nav a:hover {
	color: rgb(207, 207, 207);
}

html, body { width: 100%; height: 100%}
#bg1 {
	background: url(../images/wedding.png) no-repeat;
	display: block;
	height: 1920px;
	width: 1080px;
	background-size: cover;
}
<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
	<head>
		<meta charset="utf-8">
		<title>SD עיצובים</title>
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<div id="wrapper">
			<header div="mainHeader">
				<nav div="mainNav">
					<ul>
						<img id="logo" src="images/title.png"/>
						<li><a href="index.html">דף הבית</a></li>
						<li><a href="about.html">אודות</a></li>
						<li><a href="jewelery.html">תכשיטים</a></li>
						<li><a href="contact.html">צור קשר</a></li>
					</ul>
				</nav>
			</header>
			<div id="bg1"></div>
			<div id="bg2"></div>
			<div id="bg3"></div>
			<div id="bg4"></div>
		</div>
	</body>
</html>

Solution

  • You propably just need to add 

    html, body { width: 100%; height: 100%; }
.element { display: block; }

    and add element class to the divs/lis/whatever or just directly style it

    elements that are inline have no height and width they are treated not like a box, and also body and html need to have at least 100% height in this case

    EDIT

    Dude you didnt understand set .nav li to display: block (!!!) and not inline and give it height in px it MUST work I just tried

    my first suggestion was to add element class to the li but now use my edited answer and it WILL work

    EDIT 2

    then add class="element" to each of those bg divs and css like I wrote above, then the divs need some height, because how does the browser know what height should this empty div have?

    html <div id="bg1" class="element"></div> and css .element { display: block; height: 600px; }

    EDIT 3

    This is my last attempt:

    http://zapraszam.net/public/articles/dummy/

    Dude WHAT DOESNT WORK?!

    You added the CSS WRAPPED IN COMMENTS?!

    You are a hard one.