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;
Related
I'm replacing bullet points with puzzle pieces for a list. I'm adding them as background images. They are set to no-repeat.
For some reason, they are repeating about 1 pixel width on the bottom and right sides. I have no idea how to fix it. When I remove the "no-repeat" part of the background css, it still shows up this way.
Thanks ahead of time!
#menu-breakfast-lunch-sidebar-menu li.sidebarmenu_lunch {
background: url(http://url.wpengine.com/wp-
content/uploads/2018/11/puzzlepiece_lunchmenu.jpg) no-repeat left top;
padding-left: 60px;
background-size: 50px;
padding-bottom: 25px;
background-position: 0% 0%;
}
Here is my example on CodePen: https://codepen.io/Clare12345/pen/pQjvWa
Screenshot
This is a chrome rendering bug, specifically with the background-size attribute. If you resize the image to be smaller it will fix the issue and remove those unwanted pixels.
Here is also an article more details about the bug and other ways to fix the issue:
https://medium.com/#ryanjw/buggy-edges-in-chrome-when-using-background-size-cover-dd6eb44541fc
I see you've got an answer to the render problem already but if you use the following css then you don't need to alter the base image size:
li.sidebarmenu_breakfast {
background: url(https://res.cloudinary.com/djw6vunyp/image/upload/v1541519267/breakfastpuzzle.png) no-repeat left;
background-size:contain;
height:50px;
line-height:50px;
padding-left:50px;
margin-bottom:15px;
}
Give you more control over the styling of the list in general too.
Codepen example here - https://codepen.io/mattrey/pen/OayyLr
Hope this helps.
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>
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.
I have got rollover images setup on a site i'm building using css background images like so:
.rollover a {
display: block;
width: 400px;
height: 400px;
background: transparent url(hover.jpg) no-repeat;
}
.rollover a:hover {
background-position: -400px 0;
}
This works perfectly on all browsers however on the iphone i seem to get 1px extra on the right hand side (so it's showing 401px rather than 400px) so I end up with 1px of the rollover image displayed on the main page which is obviously incorrect. If anyone could suggest any reason why this might be happening i would be immensely grateful.
Thanks very much as ever everyone!
Dave
Try adding this .rollover a {overflow:hidden}