my site looks right in new browsers, but it won't display the background of the main container in older ones.
here is the css that should put the background there:
#container {
background-image:url('photo.png');
background-repeat: no-repeat;
height: 541px;
width:1020px;
margin: auto;
position: relative;
}
What am I doing wrong? Thank you.
am not sure if I am right, but try thiss
background: url('photo.png') no-repeat;
Try using an absolute path. You can also ignore Firefox 2.0, which is not used by anyone today.
Related
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".
There is white space appearing around the background image.
The code is as follow:
.class-of-div{
background: #00b5ff url(../img/cart.png) no-repeat;
background-position: 34px 4px;
}
This happens in all browsers
If you had kept a class to an image, than try this code:
.class-of-div {
background: #00b5ff url(../img/cart.png) no-repeat;
background-position: 34px 4px;
margin: -8px 0 0 -6px;
}
or simply use the below code:
body {
margin: 0px;
}
It's very simple than above.
Don't use photoshop's "save for web" - use "save as" instead. :)
Going by no imagery, set the width of the background image to 100%;
background-size:100%;
add this to your css
*{padding:0px;
margin:0px;}
html, body {
margin: 0;
padding: 0;
}
Try to set display: inline-block; or display: block; to your image. If you can use css3, use background-size: cover; You can use background-position: top left; or likewise.
As per my understanding of the problem, I created a fiddle to solve your problem. Please find the fiddle here
I added a border around the div and set a height so that it is clear that there is no white space around the image.
.class-of-div{
background: #00b5ff url('http://instafynd.com/problem.PNG') no-repeat 34px 4px;
height: 200px;
border:1px solid #f00;
}
Let me know if it solves your problem.
Problem in image. Download or create other. Is not CSS problem.
Thank you for your answers. It was a graphic issue, photoshop "save for web" was actually creating that space (don't know why). But once I saved the file from "Save as". It's working fine.
It's the save for web option on photoshop and similar apps that causes this. I had the same problem using Adobe Illustrator Draw on the iPad. If the application you used for making the image doesn't have a "save as" option rather than "export for web" try using something like "preview" (mac) or paint on windows to crop it down.
Sorry for uping this topic, but in 2020 if you put this in html:
<img class="class_nbr_1">
and in your CSS:
.class_br_1 {
background-image: url("../img/icons/image.png");
background-color: transparent;
position: relative;
You'll have a white border, undisplayable. So juste use <p> instead of <img>
the simplest way to solve the problem is to add the following css rule the class.
overflow: hidden;
I'm making a website with HTML5Boilerplate, but every time I use the css background or background-image property, the image doesn't show up.
Folders:
root/css/style.css
root/img_files/logo.png
My css code looks like this:
#logo {
position: absolute;
left: 20px;
top: 10px;
width: 164px;
height: 42px;
background: url(../img_files/logo.png);
background-repeat: none;
}
My stylesheet is properly added to the page:
I can't add a single background image to the objects on the page. HTML5Boilerplate has been installed, so maybe that't the problem, I'm not sure. Do you know why correct CSS and HTML doesn't display the images?
Change
background-repeat: none;
to
background-repeat: no-repeat;
Or just use
background: url(../img_files/logo.png) no-repeat;
I've just come to the same problem and discovered that in case you'll change ID from #logo to anything else (in HTML and CSS of course), then the same code will start to work. Can't say what has been "blocking" #logo to be used, but for now I don't have enough time to discover where the problem is.
Solution for now is to use anything else than #logo, eg. #logoTop or #siteLogo
Hope that helps.
EDIT: It was a selector typo problem which caused browser had ignored that. Weird was it had not happened when selector was changed to some other name than #logo. Please note that #logo:visible typo (instead of visited)
#logo, #logo:link, #logo:visited,
#logo:active, #logo:focus, #logo:hover
{
display: block;
width: 340px;
height: 150px;
background: url(../images/design-elements.png) 0 -300px no-repeat;
}
I had the same problem & found out that if without the width & height property, image will not display.
This CSS code does work in all browsers except FireFox. Why ? How can I fix it ?
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
}
Thanks in advance.
EDIT:
Here is the HTML that I want to use:
<img class="img_box" />
When Firefox encounters an image without a source, it replaces the image with its alt text. I personally find this extremely annoying, as it means I can't test layouts unless I specifically create placeholder images, and should those images be unavailable for any reason the layout completely breaks.
Unfortunately, I have yet to find a solution to this problem.
In your case, however, you would be much better off using a div and adding display:inline-block to your CSS, instead of using an image.
solution1:
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
display: block;
}
solution2:
<div class="img_box"></div>
I'm having problem with stretching my logo within a desired logo size. Below is my Css3 code. it works fine with other browser except IE. Please use IE to view my problem. www.allwireinc.com please help.
h1.logo {
width: 145px; height: 120px; }
h1.logo a {
background: url(http://www.allwireinc.com/images/weblogo.png) no-repeat left;
-moz-background-size: auto 100%;
-o-background-size: auto 100%
-webkit-background-size: auto 100%;
background-size: auto 100%;
display: block;
width:100%;
height:100%;
}
Older versions of IE don't support that.
However, you could replace it with an img, and you could stretch that.
On its own, older versions of IE don't support that feature (and many others). You might try CSS3PIE and see if it works. Otherwise you'll have to decide whether or not you are willing to live with the limitation, or if you want to write some Javascript to take care of it for you.