I've searched this on here as well as on google and can't seem to make it work. I'm trying to put images directly on top of another. This is for the menu of the site. I've tried using the z-index, which i believe I am using wrong. So I'm trying to simply set the one image as the background of the div.
here is my current code:
first the html:
<center>
<div id="menu1">
<img id="homebutton" src="./images/newmenu/homebutton1.png">
<img id="registerbutton" src="./images/newmenu/registerbutton1.png">
<img id="aboutbutton" src="./images/newmenu/aboutbutton1.png">
now the css:
div#menu1{
background-image: url('./images/newmenu/menubar.png');
}
The background image which is the solid red bar with gradient does not appear. Here is a screen shot of the page.
as you can see the buttons load but the background does not. If someone could please tell me what I'm doing wrong it would be greatly appreciated.
Your links have images in them (with the navigation text I assume). The background of those images is going to appear over your background image, so your background image will not be seen.
Have to change the question entirely upon discovering the cause.
Related
I added this svg logo to my website. I saved it in illustrator with not background and when it pops up in the web browser its has a white background. Not sure how to fix this or what the problem may be.
heres what it looks like on my end
Here is a fiddle
https://jsfiddle.net/n3ov9czj/
<img src="images/logo.svg" />
Is this what you are trying to do?
Jsfiddle 1
Or was it more like this?
Jsfiddle 2
This obviously didnt work :(
svg { background: transparent; }
It looks as if your linked image (logo?) black areas are actually transparent, showing the background. White areas are actually the (logo) image. It's kind of a negative youre trying to accomplish in that case, I guess. I can see some text behind the letter h. It would be really more helpful with the actual svg logo image to figure out the problem.
Simply test colouring the image background.
<img src="images/logo.svg" style="background-color:grey"/>
If this is the case, then you probably want to apply the background image behind the logo or whatever was the idea you want to implement.
I want the homepage of my webpage to have a fixed background image in between the navbar and footer with a smaller carousel box in front of the background image. I've looked around and haven't found anything that looks like this. I kind of don't know where to start. Is it possible?
The tag that contains your entire main content add a CSS background to it
Below navbar
Till footer
background:url(link);
Then use your slider as you would normally
I'm a newbie in coding, trying to setup a header on this page: http://s.agenziajaved.com/it/s/London/New-York-City.
As you can see in the image link provided below, the content comes in background of logo at top and I need to fix it by displaying just the white fill behind the logo. Your help will be appreciated!
http://i.stack.imgur.com/GgoCa.png
Why don't you just add the property background: white to your layout-header class? That fixes your problem.
I am trying to fix a Facebook Like button to a particular position on top of a header image on WordPress, but am having trouble with the CSS styling (and potentially id's vs classes)
On this website, I want to place a Like button below the 'Join us Now' text in the blue section of the image header image.
I tried to create a seperate div class and position it, but my knowledge of fixed/absolute/relative is pretty shoddy, to say the least. It did an absolute position, but it doesn't stay with the image when I resize the browse window. (We're targeting young students for our campaign, and so a lot will be visiting our sites from small laptop screens and smartphones, so has to be responsive)
Does anyone have any idea how I can do this?
Thanks :)
Edit the layout of your HTML elements so that your like button is positioned below your main image link like this:
<div id="header-banner" style="width:100%;height:300px;">
<a href="http://www.w4u.org.uk/">
<img src="http://www.w4u.org.uk/wp-content/uploads/2013/02/copy-home-banner.jpg" class="header-image" width="960" height="250" alt="">
</a>
<div class="fb-like"></div>
</div>
Once that's in place adjust the CSS for the like button by adding this to your inline style that's already in place:
top: -98px;
Here's an image of what it should look like after you make the changes:
I'm currently working on this layout
http://imstillreallybored.com/gridiron/indexx.html
at the top menu i have to different backgrounds for the menu the red one and the gray gradient. I need the gray gradient to continue on the right side of the menu off of the page i cant seem to get this to work. I tried absolute positioning but when you resize the browser it covers the menu which wont work. I cant seem to think of the right way to do this anyone have any ideas?
You can create a very long background image for your #menuContainer that is half red and half grey, and then center position it, so it will always stay red on the left and grey on the right. It might be a hacky solution, but that is the easiest thing you can do without changing your markup.
try nesting a few divs. run the grey gradient all the way across, then put your red image over that in another div, and left align it. make the red image like 500px wide and it'll always be on the left, but will extend under the menu and be hidden.
<div style="background-image:url('grey-gradient.jpg'); background-repeat:repeat-x;">
<div style="background-image:url('red.jpg'); background-repeat:no-repeat;">
<div>
<ul>menu</ul>
</div>
</div>
</div>