Hey everyone I have a problem with my site. www.therecomplife.com The main image is in my logo container, and the black space surrounding the image is my custom background color. I've done everything I can to make the logo fill the whole space of the black region (not the secondary menu area). Here's the question. I want to make a new background image and center it at the top so that the space is then filled with that image and I can be on my way. Any help regarding the css code would be awesome. thanks guys.
I dont see any black space wich surround the image do u want to change the background image of primary menu?
sorry guys I was messing around with the css. Ok so I have a screen shot of what I'm trying to accomplish.
see how the custom background image isn't in my css? firebug is saying that it's on line 79 of my website?... I dont know where to put this code so I can have my custom background look the way it does in the screenshot. I want the background to be the same throughout the whole site. Is it a php problem?
http://www.therecomplife.com/wp-content/themes/Lucid/style.css no,its there; /*------------------------------------------------*/ /*-----------------[BASIC STYLES]-----------------*/ /*------------------------------------------------*/ custom-background { background-image: url("http://www.therecomplife.com/wp-content/uploads/2013/03/final.png"); background-position: 0 6%; background-repeat: no-repeat; } HTML: What do you want to change?
If i'm understanding correctly you'll need to remove the margin-bottom:57px; That should get rid of the space between the logo and menu .container #logo-area { text-align: center; margin-bottom: 57px; visibility: hidden; }
I'm sorry I accidentally left it in the css. yea it is/was there but It doesn't change anything. no matter where I put that code in the css it still has no effect on my site. I have to go to my wp dashboard and set an image through that, but I cant find out how to edit the attributes of the background image so that it lt looks the way it does in the picture above. I have the code of course...just dont know where to put it.
Ok so here is my site www.therecomplife.com. as you can see I have the image the way I want it, but when I go to a different page in my site look what happens to the background image. Here is the code I used body { background-image: url("http://www.therecomplife.com/wp-content/uploads/2013/03/final.png"); background-position: 40% 6%; background-repeat: no-repeat; line-height: 1; }
just delete this from your header.php <div id="logo-area"> <a href="http://www.therecomplife.com"> <img src="http://www.therecomplife.com/wp-content/themes/Lucid/images/logo-blue.png" alt="therecomplife.com" id="logo"/> </a> </div> Code (markup): and add width with height to custom-background { background-image: url("http://www.therecomplife.com/wp-content/uploads/2013/03/final.png"); background-position: 0 6%; background-repeat: no-repeat; } Code (markup): width: 1000px; height: 200px; change dimessions I made an example
The image isn't showing when you go on other pages because you used a body class to assign the image to header. When you are on index you got: <body class="home blog custom-background chrome et_includes_sidebar"> Code (markup): and on other page: <body class="single single-post postid-125 single-format-standard gecko et_includes_sidebar"> Code (markup): This is happening because in header.php <body> starting tag uses a function to get a class for different pages. Also, your theme is using the old logo and your new header background which are somehow overlapping. My advice is to make a separate div for new background image. First, remove "custom-background" from body class. A "container" is called multiple times. Rename that "container" that contains '<div id="logo-area">' to <div id="custom-bg"> You will get: <div id="custom-bg"> <div id="logo-area"> <!--<a href="http://www.therecomplife.com"> <img id="logo" alt="therecomplife.com" src="http://www.therecomplife.com/wp-content/themes/Lucid/images/logo-blue.png"> </a> You can remove this , comment or hide with css (see below) --> </div> </div> Code (markup): To hide old logo , add to stylesheet: #logo { display:none; } Code (markup): add to stylesheet: #logo-area { background: url("http://www.therecomplife.com/wp-content/uploads/2013/03/final.png") no-repeat scroll left top transparent; height: 210px; margin-top: -3.7em; } Code (markup):
Hefaistos you are AMAZING! Would you mind pointing me to some resources to learn what the hell I just did to the header.php and to my style sheet? lol I'm still kind of new to this. All of you guys are great! thank you all so much for your help.
Theese are some basic things . If you want to learn to modify/create WordPress themes, first you need to learn some HTML (a very good website to start is http://www.w3schools.com/html/default.asp) and css (http://www.w3schools.com/css/default.asp) . You can start with HTML basics and css2 , then continue with HTML5 and css3 for more advanced things and effects. To apply this to WordPress, you need to know WordPress themes structure, functions and how things works (You can find a lot of valuable info on http://codex.wordpress.org/). If you want to go deeper in themes development you also need to learn some PHP and JavaScript. Once you have some knowledge about things above ,you can find and download some free themes , look at their structure and code and modify them to practice your skills and learn new things.