background image query

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

background image query

Post by aravona »

I've got a question about background image positioning.

I've got a header and an image on said header (as background-image) that I want positioned on the right. This isnt a problem, I've got it set currently to 'center right'. However I want a bit of padding between the edge of the header and the edge of the picture. And I cant seem to find a way of doing this.

I've tried putting the image within the header.php using a <img scr=" "> tag but no show. So I put it on the CSS file as part of the background. Any ideas?

This is the CSS for the header.

Code: Select all

 
#header {
background: #7d7d7d; 
background-image: url('images/logo.jpg');
background-repeat:no-repeat;
background-position:center right; 
border-bottom: 3px double #aba;
border-left: 1px solid #9a9;
border-right: 1px solid #565;
border-top: 1px solid #9a9;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
height:75px;
}
Attachments
image.jpg
image.jpg (36.32 KiB) Viewed 1791 times
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: background image query

Post by social_experiment »

I dont know if the background-position has anything to do with this but if I removed it, the image acted weird. Hope this helps.

Code: Select all

#header {    background: #7d7d7d;        background-repeat:no-repeat;    background-position: center right;    border-bottom: 3px double #aba;    border-left: 1px solid #9a9;    border-right: 1px solid #565;   border-top: 1px solid #9a9;   font: italic normal 230% 'Times New Roman', Times, serif;   letter-spacing: 0.2em;   margin: 0;   padding: 15px 10px 15px 60px;   height:75px;  }#header img {    float: right;    padding-right: 20px;}  
Attachments
Untitled-3.jpg
Untitled-3.jpg (10.5 KiB) Viewed 1744 times
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: background image query

Post by aravona »

Looks like it should but putting that in got me nothing - no image at all? What did you do in the html side where you link the image?

Thanks
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: background image query

Post by social_experiment »

:oops: I should have pasted the html too. Here is the example i used, the image width / height will obviously vary according to your own specifications.

Code: Select all

<div id="header">Blog<img src="Untitled-2.png" width="200" height="75" border="0" /></div>
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: background image query

Post by aravona »

Oh ok yeah thats what I did, turns out Wordpress is still very .... obsessive with absolute file paths, cant use a relative :(

Working now :) thanks
Post Reply