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.
Related
Heyya,
I've just started writing a website (I'm still pretty new to learning web dev) and I'm having issues with getting a background image to load on a website despite looking around and trying a bunch of different things.
.nav {
width: 100%;
background-image: url("../images/Shadex1.png");
background-repeat : repeat-x;
position : absolute ;
height: 50px;
left : 0;
top : 0;
}
The idea is to get the image to repeat and cover the nav bar and I've tried using both a png and svg files, but I just can't get it to work. I can load the images in the html file and that works fine so I know the file path is correct but CSS just isn't liking it so need a second pair of eyes to take a look.
Thank you for reading and any answers you might come up with.
Try to set width to 100vw and is the uri correct?
Make sure you are able to load the image background-image: url("../images/Shadex1.png"); property. I think there might be chances that url is wrong. if you are getting an image correctly than just see below example.
.nav {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1657037031161-d126c02cce8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
background-repeat: repeat-x;
position: absolute;
height: 100vh; /*I have added extra height for viewing image*/
left: 0;
top: 0;
}
<div class="nav"></div>
So for my website hostup I tried to add sprites since I had over 25 images and google pagespeed complained. I solved my sprire not displaying issue, but I am not sure why. Why is it that you have to load the image in each and everysprite, to waste bandwith and slow down pagespeed?
.sprite {
background-image: url(../img/spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-backup_icon {
width: 60px;
height: 60px;
background-position: -5px -5px;
}
.sprite-cpanel_icon {
width: 60px;
height: 60px;
background-position: -75px -5px;
}
.sprite {
background-image: url(../img/spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-backup_icon {
width: 60px;
height: 60px;
background: url(../img/spritesheet.png);
background-position: -5px -5px;
}
.sprite-cpanel_icon {
width: 60px;
height: 60px;
background: url(../img/spritesheet.png);
background-position: -75px -5px;
}
html code
<div class="sprite-backup_icon"></div>
So the 2nd. works just fine, but the 1st. does not display any image, Just a blank image with the defined width and height, why is this?
To answer your first question:
If the browser finds an image in a Style Sheet, it will download it and then store it in your browsers cache. The next time that same image is found/requested in a Style Sheet from the same URL (even during the same initial page load), it will be served from cache. NOT re-downloaded. So while you may have spritesheet.png 3 times in your Style Sheet, it is only downloaded once and not wasting bandwidth or page loading speed.
It is because of this caching feature that sprites are favoured in providing things like icons and other smaller images.
For your second question on why your first CSS example does not work, it could be any number of issues ranging from a simple typo, or all the elements you are wanting to use the sprite with not having the sprite class.
In order to properly help you with this problem, we need to see your HTML that goes along with the posted CSS. Please make an edit your question and add your HTML as a code snippet.
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
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".
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>