I have a website which I've been working on and in firefox, the div at the top of the page is not showing for some reason, but it does in Chrome!
The div in question is
<div id="top-header"></div>
#top-header {
background-image: url(assets/images/theme/bg-top.jpg);
background-position: left top;
background-repeat: repeat-x;
height: 20px;
}
It has a background image and a set height and is within a container div. It seems like there is a float issue? But I have tried clearing it.
Any help is appreciated!
Your html element has a margin-top: -40px; which pulls it out of view since the #top-header is only 20px tall.
Related
I'm having trouble getting my website to display properly on mobile devices
Here's the code I used in my CSS, and this is what I want it to do on mobile devices too:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
html, body {
width:100%;
height:100%;
}
I have no idea what I've done wrong, I've tried a couple of fixes and I haven't been able to make it work. Can someone help? Links below.
My website - http://renoized.com
You could try either:
Background size: cover;
or
Use an image instead of a background, using absolute positioning and a z-index value of -999. Since iOS doesn't support background images with 100% width.
The method I used to fix the problem is this, regardless of how elegant or inelegant it is, I'm just glad it works.
All I had to do was copy the css from here:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
to my content container tag, which in my case is #page.
What this does is give the content its own background in the correct place. It also fixed a problem I had on .desktops where the background would move if your device width is smaller than the content <div>
I have created a web page where on click of a button some divs are added to a table, for styling I have given background image url to div, its working on all browsers but going to iPad background image of newly created div is not showing up.
It seems that those images are not loading, Any Idea how to solve this issue?
here is my css:
.emailReply div {
background: url(/images/coach/icons/reply-email-icon.png) no-repeat;
background-size: 100% 100%;
background-position: center;
width: 35px;
height: 35px;
display: inline-block;
}
I have a DIV with height/width of 15px.
It has a background image also with height/width of 15px.
The problem is the background image is being cut off a few pixels on right and bottom when zoomed out some levels in firefox.
Here's a link and code below. Try viewing it in firefox.
<div id="custom-checkbox"></div>
#custom-checkbox
{
background: url('http://s16.postimg.org/5xacziapd/unchecked.png') no-repeat;
width: 15px;
height: 15px;
}
This is the best I can get it to display the rest is just firefoxes pixel rounding.
#custom-checkbox
{
background: url('http://s16.postimg.org/5xacziapd/unchecked.png') no-repeat;
width: 15px !important;
height: 15px !important;
display:table;
}
Hope this helps it's the best I could do.
This is my first time posting here. I have a problem. I've been trying for ages to get multiple background images to work in both Chrome/Safari and IE. Of course it works in all browsers except IE.
This my code:
#container {
width: 828px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
overflow: visible;
background-image: url('images/body.png'), url('images/filler.png');
background-repeat: no-repeat, repeat-y;
}
The reason I am using two background images is because I want the illustrated part to stay at the top, and have the white page background in the same div layer repeat when more content is added.
Right now this code works perfectly in Chrome, but NEITHER of the background images show up in Internet Explorer.
Help?
If it´s possible I suggest you use two container elements.
HTML
<div id="container">
<div id="inner-container">
</div>
</div>
CSS
#container {
background: url('images/filler.png') repeat-y;
}
#inner-container {
background: transparent url('images/body.png') no-repeat left top;
}
Alright, for my site users/members have an option to upload/link a custom image to use for the start page of my site. This works well with nearly all new browsers that support background-size. But does not fill in the entire div section with the image if the browser does not support css3 background-size.
Yesterday I had a chance to test my site on a 25"inch monitor and ended up realizing the image display part failed. What ended up happening is that the image was shifted to the left.
Today checking the code I forgot that I had this line in "background-position: top left;" but I remembered why I left it in the code, the moment I add "top center" or just "top" the background is still displayed however there is like 6 - 10 px white gab to the left of it. I tried using left: 0px; but can't get it to work since I am using position: fixed; and if I change it to position: absolute it displays full image which ends up creating a scroll bar on the bottom.
Here is the code for the CSS part I am using at the moment
#cpBackgroundImg {
background-repeat: no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: fixed;
background-position: top left;
position:fixed;
z-index:-10;
margin-right: 0px;
margin-left: 0px;
background-size:100%;
}
and here is the other part of the code which actually displays the image
<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="cpBackgroundImg"></div>
Can some one tell me how to fix this problem?
- Thanks
http://jsfiddle.net/Hnwjg/6/
width: 1600px;
Is that monitor you tested it on have a resolution larger than 1600? If so the div looks like it's limiting the width of your image to 1600. meaning there will be white space on the right of the image?
Just a thought.