/    Sign up×
Community /Pin to ProfileBookmark

background image

Copy linkTweet thisAlerts:
Dec 19.2011

Hi All,

I am trying to put few images at the top of another image which is a background image but it’s not working the way I want to do.

Here is the html code

[code=html]<div id=”wrapper”>
<div id=”header”>
<div style=”display:block; width:232px; float:left; padding:3px;”><img src=”images/share.gif” /></div>
<div class=”rss”><a href=””><img src=”images/rss.gif” /></a></div>
</div>

</div>[/code]

and the css is

[CODE]body {
margin:0;
padding:0;
font: 12px verdana, arial, helvetica;
color: #777c7c;
}
img{
border:none;
}

#wrapper{
width:100%;
}
#header{
background-image:url(images/bg.gif);

margin: 0 auto;
padding: 0px;
width: 632px;
height:570px;
}
.rss{display:block; width:110px; float:left; padding:3px;}
.rss a{display:block; width:110px; float:left; padding:3px;}
[/CODE]

Instead of using height:570px can I do the same?

Please suggest me.

Thanks,

Raj

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@hamburglarDec 30.2011 — Would you have a screen shot or photoshop of how you want the end result displayed?

Just a bit confused about your request.
Copy linkTweet thisAlerts:
@raj_2006authorDec 30.2011 — I have attached the sccreenshot.....actually in the header id I don't want to use the height....without using the height how can I put the dark grey as background

Thanks a lot.. ?
Copy linkTweet thisAlerts:
@hamburglarDec 30.2011 — If you want to use the dark grey as the background, then you do not need to use the height for the header.

I believe the img element inside the header div should expand the div itself.

you can use:
[code=html]
 background: url(images/bg.gif) repeat;
[/code]

The [B]repeat[/B] value will repeat that same image over and over again. This way you do not have to worry about the height of the header.

Also, I noticed that your images do not have a height or width set on them.
[code=php]<img src="images/share.gif" />[/code]

I would suggest adding the proper dimensions in the image as IE will not show the images. I think its IE 7 or 8. I ran into this problem a couple of times.

let me know if this works.

Regards,

H
Copy linkTweet thisAlerts:
@raj_2006authorDec 31.2011 — I have removed the height and set the dimensions of the image but still the bg image is not repeating I think the problem is in the bg image itself.

I have attached the image.I think it would be better if I cut the bg image as y axis instead x.
Copy linkTweet thisAlerts:
@hamburglarDec 31.2011 — Hey,

There are a couple of things you have to take into consideration.

First, your background has a gradient that goes from light to dark. If you want to keep the gradient then it is ok to keep the background and repeat it on the x-axis.

[code=html]
 body{
background: url(bg.gif) repeat-x;
}
[/code]

But you will run into a problem as that image will have a specific height. Please take a look at the attachment.

So you get a ton of white space.

Option 1:

Set a background color.

What you can do is determine the hex value of the bottom part of the gif, in this case its #363636, and set that as the background color. This will make sure there is no white bg but a color that blends in. Obiviously its not smooth because you have a pattern as well.

Here is the code:
[code=html]
body{
background: url(bg.gif) repeat-x #363636;
}
[/code]

Option 2:

Set a larger background image height. If you want to not do the above option then simply change the height of bg.gif to something bizarre like 2000px or so.

Hope it helps.

Let me know.

Thanks.
×

Success!

Help @raj_2006 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...