<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-image: url('a.jpg');
}
.main:hover {
background-image: url('b.jpg');
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
When I load the page, my a.jpg didnt appear at all, hence no hover effect
Is it something wrong with my code?
http://jsfiddle.net/ZH9EL/6/
Nothing is wrong with your code. The first image is being redirected to the main website so you don't have an image being loaded. You will have to host it locally. I used a different image and it works.
No there is nothing wrong with your code, it could work, but I believe it is risky to use 2 images, if 1 is not loading it will not work...
You'd like to use two images but if hover image is taking to long to load or just not loading at all it will not work very well..
You might want to try Alois Mahdal's answer: https://stackoverflow.com/a/19967062/3217130 please read their reply..
Your css should be something like:
<style>
#main {
width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
background: url('a-b.jpg') no-repeat left top;
}
#main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
</style>
This will work and will load normal and hover at the same time so you wont face problems with dns or server delay and other problems that could make pages look ugly if images are not loaded...
Please try Alois Mahdal's answer, this will work for you, if you don't understand how to create this for your images (a-b.jpg and new smaller but better code) then I would like to tell you how to do this with your images and classes and the result you need.. I create sprites with Paint .NET or I use spriteme.org to optimize CSS on running websites you can copy new css and images if you're using spriteme.org they will be created on the fly. There are lot's of ways to create or edit images...
I hope my answer was helpful to you,
Happy coding
Related
Most of my WordPress websites have a background image in the top fold. These images are the Largest Contentful Paint Element on the page and usually they get loaded last. Somewhere I read that 'Background images are last in line to be grabbed when a page is loaded'. Is it true?
Is it a good idea to use a place holder or image in the place of the background image and then change it later so that the LCP gets loaded quickly like below.
<div class="header-img"><img style="display: none;" src="images/header-img.jpg" alt=""></div>
.header-img {
width: 100%;
height: 500px;
background-size: cover;
background-image: url(images/header-img.jpg);
}
Source
You don't want to use a placeholder image to prioritize your background images in situations like this, you want to use <link rel="preload">. That will tell the browser to start downloading the image as soon as possible.
Try adding the following code to the <head> of your page, and then use your background image as normal. It should load much faster:
<link rel="preload" as="image" href="images/header-img.jpg">
You can read more about this technique here:
Preload critical assets to improve loading speed
Preloading responsive images
Hey I tried to make a page in Asp.Net Core and I want to put an image in the background but the way I tried wasn't very successfully.
<style>
.body {
background-image: url('..\pictures\mypicture.jpg');
}
</style>
Or when I tried to make a normal picture it didn't work either:
<img src="..\picture\mypicture.png"/>
first make sure your picture folder is in wwwroot and make sure you have
app.UseStaticFiles() in startup. ,after than, try this :
<img src="/picture/mypicture.png"/>
or
<style>
.body {
background-image: url('~/pictures/mypicture.jpg');
}
</style>
Website goo.gl/4nQia8
How do i remove the black background in the widget called whos online.
I have spent sometime searching for that css but i cant find it or manipulate it.
I have changed everything that is called background in my css without anyhelp.
Also tryied to add style to the iframe didnt help.
allowtransparency="true" style="background: none;"
I want 100% transperent i have tested everything that i can.
This piece of code is affecting your iframe:
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #161522; }
</style>
To remove the colour from the area you want, you could create a 'wrapper' div for the first two columns, and apply the custom-background-css only to the wrapper div as opposed to the body and then the entire body would not be affected, only the sections you want. Hope this helps.
Solve it!
In the actual .php thats why i could not find it.
<table style="width:361px;background:none;"
<tr style="width:361px;background:none;"
i have little issue with repeating background image using bootstrap framework, but i'm quite beginner. I tried many ways already and nothing works.
Can u help me with that please ? I've tried for example that :
<style>
html, body {
background: url("img/bg-pattern.png") repeat;}
</style>
Your path is probably incorrect. As far as I can see, bootstrap has a different folder structure than what your code suggests. Try this:
body {
margin: 0;
background: url("../img/bg-pattern.png") repeat;
}
I'm unable to reproduce your issue on JSFiddle. For this reason I can only presume your image path is invalid.
In specifying img/bg-pattern.png, you're pointing to the bg-pattern.png file contained within the img folder contained within the same folder as your CSS. This assumes a folder structure of:
img
myHtml.html // Where your style element is included
Make sure your "img/bg-pattern.png" is present in the same folder where your file is present
else give the absolute path of the image.
Try using FireBug, maybe you'll see that the <body> tag is much smaller ( in height ) than you think.
I've moved my background: ... from the <body> tag to the actual <div> that contains the entire content ( which grow dynamically vs the <body> ) and the background is repeatable there ...
The NextGen gallery isn't displaying properly in Chrome, but works fine in firefox. Has anyone found a fix for this problem?
Even the sample page for the gallery display isn't displaying correctly. http://nextgen-gallery.com/gallery-tags/
When you open an image to view it, after moving to a second image, the image moves down a bit and after a few images its sitting below the website, not near the top or in the middle. This is making it fairly unusable.
Thank you
Better Yet:
<style type="text/css">
#shDisplay {
top:15%!important;.
}
</style>
Worked for me, and does not have an absolute value, which is better for different sized monitors!!
just use this in the header of your page :)
it did the job in chrome for me :)
<style type="text/css">
#shDisplay {
top:30px!important;.
}
</style>
thanks to this discussion i have solved a similar problem (first photo open at the bottom of the page in Chrome and Firefox). But i had to change a .css script a little and to add a rule for "fancybox-wrap" div:
<style type="text/css">
#shDisplay {
top:15%!important;
}
#fancybox-wrap {
top:5%!important;
}
</style>
Thank you!