I have background images in my CSS file that are quite heavy. For that reason, I would like to load them using Lazysizes, which loads content as you scroll on my site.
My github hosted page
To enable load on scroll the image needs to be inside the HTML using the class lazyload and data-src. This works very well for me on all the assets on the site but I have some background images in my CSS that I have tried to move over to the HTML, but I fail to style it and look and work the way the backgrounds currently does.
I did not write the entire CSS on the site and I'm stuck making the current background images act exactly like they do now, but give me the possibility to just have the image references in the HTML.
My attempts have resulted in the image being stretched or won't use the breaking points as all current backgrounds work with or the background resulting in a square in the middle of the page.
So the challange for me is not the actual HTML, or getting it to load using lazysizes. The challange is getting the CSS to work.. HTML element with the backgrounds I'm trying to change is attached below:
<section class="proj">
<hgroup>
<h2>Socialmist</h2>
<h6>Instagram with music from SoundCloud</h6>
</hgroup>
<div class="mw by full">
<img class="wide">
</div>
</section>
Thank you for taking your time, much appreciated!
Made it work. Attached code below.
.yay {
max-height : 550px;
background-repeat : no-repeat;
background-position : center;
object-fit : cover;
}
<section class="proj">
<hgroup>
<h2>Placeholder</h2>
<h6>Placeholder</h6>
</hgroup>
<div>
<img class="wide lazyload yay" data-src="img/sm/bg/7T5C5861-s.jpg"/>
</div>
</section>
I have one html form, and need to get read and blue circle one by one (vertically alligned), and when value inside circle is entered i need to dynamically with css change width to get desired value..i try with display: inline-table and block but it is not working...here is picture that of what i get and what i need to get:
http://imgur.com/Jt1nuh3
From image i need to automatically change left and width on red and blue circle that is depending on entered circle value (+999) and need to bi inline like in down picture...i get using inline for css like in first page...
Here is my html code:
<!-- page device statistics -->
<div class="devicestat" title="Online: 0">
<!-- page device title -->
<div class="stat-name">
<div class="stat-name-devices">Devices</div>
<!-- android device -->
<div class="stat-badget-android" title="Android">+0</div>
<!-- enigma device -->
<div class="stat-badget-enigma" title="Enigma">+0</div>
<div class="stat-number">0</div>
</div>
</div>
You could try setting the css for the red and blue circles to have float:right; and clear:both; that way they are always set to the right side aligned perfectly regardless of what number they are. Example below:
.stat-badget-android{
float:right;
clear:both;
}
.stat-badget-enigma{
float:right;
clear:both;
}
I'll need to see your css and html if you want a better example.
HI i am building a site with genesis and dynamik. On the Home page with dynamik at the top there are 3 widgets. I created 3 more underneath the top three.
My problem is when I hover on any one of the elements the rest "jumps" around. All that the hover does is to adjust the element size from 300px to 350px.
How do I manage it that only the "active" element being hover on reacts and the other 5 stays static?
I might have found a solution BUT i am still lost. Bit too new at this I believe.
The two lines of code
Does this go into a html file? I am using Wordpress and these 6 fields are populated using widgets.
From the solution I understand that I have to create first-hover to six-hover with six of the lines of code linking the images to the class.
And the using the position:absolute;
If my take on this is correct please let me know and just advice me how do I do the
code and where.
Thx
You should set the css in \wp-content\themes\the-theme-you-use\style.css, for example it could be like this:
.dynamik-widget-area.feature {
position: absolute;
}
Just place this anywhere at the end of the file.
Another solution is to add style="position: absolute" to the first <div> element in the following part:
<div style="position: absolute" id="ez_feature_6" class="widget-area dynamik-widget-area ez feature 6">
<section id="black-studio-tinymce-39" class="widget widget_black_studio_tinymce">
<div class="widget-wrap">
<div class="textwidget"><p style="text-align: center;"><img class="alignnone size-medium wp-image-64" src="http://new.bluprintwebsolutions.co.za/wp-content/uploads/2015/02/diy1billboard-300x300.jpg" alt="diy1billboard" width="300" height="300"></p>
</div></div></section>
</div>
However note that this will solve the overlapping problem, but in return you'll have to reposition the elements.
Repositioning can be done using css too, using for example left attribute. Something like:
.second{
left: 100px;
}
then add second to the classes of that
<div style="position: absolute" id="ez_feature_2" class="widget-area dynamik-widget-area ez feature 6 second">
I do web dev stuff mostly as a hobby. I'm used to XHTML 1.0/CSS3 using a table layout.
I'm trying to update my skill set and match industry standards more closely. The template I'm working on now uses the HTML5 doctype, CSS3 and divs for organization instead of a table.
My primary question is related to background images and optimization. I have a div that acts as the main body with a smaller div within to hold the actual content (and 2 divs to aid with positioning):
<div id="Body">
<div class="BD L BG"> </div>
<div class="BD C">
<div id="Content">
</div>
</div>
<div class="BD R BG"> </div>
</div>
I have a 150px x 150px square background image.
The question is:
Should I repeat the image across x axis of the body div Or should I place 1 square in each of the smaller divs?
.BG {
background-image:url('./images/BDBG.png');
background-repeat:no-repeat;
background-size:100% 150px;
}
or
#Body {
width:100%;
min-height:760px;
padding:0px;
margin:0px;
background-image:url('./images/BDBG.png');
background-repeat:repeat-x;
}
To me it seems like it would take more memory/processing to repeat the image and the image would technically exist behind the content div, which has a white bg-color rendering it invisible.
I know it seems like a silly thing to focus on and probably wont have a major impact but every little bit helps.
Live demo available: http://proofoftheilluminati.com/test/ (using option 1)
Multiple DIVS would result in the browser having to paint each seperate div, and thus higher rendering times.
If you use Chrome, open the Dev Tools > Timeline and run some tests..
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.