I want to show an Animated GIF while images loads and I want to do this using CSS. (eg: without JS if possible).
<img src="images/users/girl1.png" class="thumbnailPreLoader memberImage"/>
.thumbnailPreLoader {
background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9;
height: 101px;
width: 101px;
position: relative;
}
div#preferredMembers img.memberImage {
border: 1px solid #808080;
padding: 3px;
}
Above is what I'm currently working with and you can see this at www.datingjapan.co (set of 5 thumbnail images).
I'm currently finding I just don't see the GIF.
If I go into chrome developer mode and change the path of the img I can see the GIF then so I know the path etc are correct.
Is this possible? Is there a trick I'm missing? any help would be greatly appreciated.
Note: I know how to do this with jquery .load() but it would suit me much better to just attach a CSS class.
thx
try removing the scroll in background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9; It is not required here. It solved the issue in my chrome inspector...
Related
I've created three circles that are used for the dot controls/pagination on an image slider. For some reason on page load in Chrome they always appear first as squares and not as circles. Once you interact with them they then turn to circles. How can I get them to be outlined circles on page load? (if i just fill in the circles with a background they work and are circles on page load but I want them to be outlined circles on page load)
Any ideas? Thanks!
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
margin: 0 8px;
height: 8px;
width: 8px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border: 2px solid #b6b6b6;
}
Thanks for the help guys! I figured out what the issue was but I don't quite understand why. I added an overflow to the dots and this took care of the bordered showing up as a square rather than a circle like I wanted on page load.
overflow: hidden;
I don't know exactly what do u mean.
But I think issue is html of slider creates dynamically via js on dom or page load event, so css applied with some delay.
Check source code of your page with right click->view source to ensure.
Try to call your slider plugin immediately after slider container, not at the end of page for ex.
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
I was looking at ways to include a title in a page and I have come across this website: (see image below) which does exactly what I want but I can't figure out how to accomplish it. The trouble I have is in only having a single title image at the top without it repeating through to the bottom. I have used the css background-image:url(image) on the main div but the repeating image problem is present. Any help or insight on this matter will be greatly appreciated.
EDIT: I need the rest of the background to repeat until the end. I think having the rest of the background be a separate image may be part of the solution but I don't know if a title image div can be forced to the same layer. Again any insight is valuable as I am new to HTML and CSS. Also this is the best example website I can find, if you are offended please edit with a better example. Thank You!
You can get it done using the below CSS,
#elemId
{
background: #00ff00 url('testimage.jpg') no-repeat top left;
}
Hope it will help
background-repeat:no-repeat;
This is the css trick to NOT repeat a background image.
If you didn't know this already, how the hell could you make it to this website ?
from you link
body {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
}
#wrapper {
background: url("/marines-theme/images/layout/body-background.jpg") repeat-x scroll left 23px rgba(0, 0, 0, 0);
margin: 0 auto;
min-width: 980px;
overflow-x: hidden;
}
#overview-wrap {
background: url("/image/image_gallery?uuid=a394504c-a638-449e-bb56-b517cfe7d3ee&groupId=10162&t=1349957392552") no-repeat scroll center top #000000;
}
Those are nested markups like so :
<body>
<div id="wrapper">
<div id="overview-wrap"></div>
</div>
</body>
That's about it.
ps. i added a screenshot of what you want to show. Can you remove the (now useless) link?
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.