CODEWITHSUNDEEP
htmlcss
user3924730
user3924730

Reputation: 183

Background Image from CSS is getting repeated

I have a div which contains a background image coming from the css.As per my need i have to show this div after 77px; from the top.So i have added padding-top:77px; in my css but the background image is not coming below or after to 77px; instead it is coming from top only and getting repeated.If i am adding background-repeat: no-repeat; then it is leaving 77px; space down in the Div and again it is coming from top only..

Here is the HTML ..

 <div class="header-wrapper">
 //Header Div
 </div>
 <div id="headerbodyimage" class="headerbody-wrapper">
  //Header body Div
  </div>

And Here is the css..

.header-wrapper {
position:fixed;
background: url("../img/new_images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;     
width: 100%;
height: 77px;
}

.headerbody-wrapper {
background: url("../img/new_images/banner.jpg");
z-index: 60001; 
padding-top:77px;
width: 960px;
height: 242px;    
margin: 0 auto;
}

Please help me ..THanks

Upvotes: 0

Views: 231

Answers (3)

Danny Koshy
Danny Koshy

Reputation: 56

Please check this fiddle

.header-wrapper {
position:fixed;
background: url("http://eshbeata.com/images/backgrounds/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;     
width: 100%;
height: 77px;
}

.headerbody-wrapper {
background: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg");
z-index: 60001; 
padding-top:77px;
width: 960px;
height: 242px;    
margin: 0 auto;
}

I have solved your issue .both the images are coming properly.Now youcan position it using background position property the way you want it.

Upvotes: 0

Jesus Lugo
Jesus Lugo

Reputation: 796

A different approach from other responses, as you're using fixed position for the header wrapper, you could set a padding top for the parent container (body, for example):

body {padding-top: 77px}

Leaving the headbody wrapper:

.headerbody-wrapper {
background: url("../img/new_images/banner.jpg");
    z-index: 60001; 
    width: 960px;
    height: 242px;    
    margin: 0 auto;
}

I was about to set up a pastebin sample, but didn't have your real images.

Upvotes: 0

Rakhat
Rakhat

Reputation: 4942

Use background-position: 0 77px;

Upvotes: 2

Related Questions