Ok, to start off, I'm sure out in the internet there is a good tutorial about this, but I can't even manage to "write down" a possible title for the problem, and I apologise for that.
I like a responsive and simple makeup:
<div class="gallery-container">
<img src="/your/image/url.jpg">
<img src="/your/image/url2.jpg">
<img src="/your/image/url3.jpg">
......
</div>
My problem is: I have different aspect ratio images to show off all with the 3:2 aspect ratio.
An easy solution would be to insert the images as a background to the a element with CSS, set it to be centred contained and then, with a simple JS script define a height to be 75% of the a width.
I used this solution before, but this time is not working for me: I need to dynamically insert the images with PHP.
How can I get a similar effect to the above explained CSS technique but with the images declared in the HTML?
UPDATE: something like this: http://jsfiddle.net/fF6GL/ - but I need the above makeup, this one would not work in that case
P.S. if possible, I would like a solution without using a JS library.
If you can put those linked images into a list, this might work:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Ok I got a solution that is working for me, a demo is available here: http://jsfiddle.net/fF6GL/3/
Essentially, I'm just adding the background image on the CSS directly on the HTML:
<div>
</div>
And this is the CSS:
div {
width: 90%;
margin: 0 auto;
}
div a {
display: block;
float: left;
width: 50%;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
For the height, I'm using a small clever trick here:
div a:before {
content: "";
padding-top: 75%;
display: block;
}
This won't work on IE, but sincerely, I don't care.
Related
I've implemented lazy load images to most of my website (USING THIS https://github.com/tuupola/lazyload), however I have a shop page which is a load of thumbnails which are using the background-image tag, the code I have is as follows (it's running on smarty template system) :-
{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><span class="thumb" style="background-image: url({$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category});"></span><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}
The CSS :-
.blocks1 .block a span.thumb {
width: 120px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 auto
}
All the examples I can find rely on the background-image part being inside a div but mine is inside a span tag.
Is there a way to get this to work?
Reading online suggest span is used to style text but the original dev who wrote this seems to be using it for images?
Thanks for any help on this, I think I've tried just about everything to get this to work!!
did you try to do it with a <Div>?
W3School suggests "The <span> tag is an inline container used to mark up a part of a text, or a part of a document."
And for Div: "The <div> tag defines a division or a section in an HTML document."
I think it shouldn't make a big difference, as long as it doesn't bother your others styles?
The <span> tag is per definition an inline element used to format text. You can however turn it into a block element, so it will behave exactly like a div.
try adding this to your CSS rule:
.blocks1 .block a span.thumb {
display: block;
}
The concept is explained here: https://www.w3schools.com/html/html_blocks.asp
If your items need to be displayed next to each other and you don't want them to wrap after each item, try display: inline-block; instead.
I got this working using a different plugin (http://jquery.eisbehr.de/lazy/#about)
I added this to the CSS :-
div.lazy {
width: 120px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 auto;
display: block;
}
Changed the tpl code to : -
{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><div class="lazy" data-src="{$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category}" /></div><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}
And I now have fully lazy loading images :)
So I'm trying to get two individual divs which are close in proximity to share one background image but I'm not sure if this is possible. I've uploaded two pictures, the second being designed for a smaller screen (just to further explain what I mean) http://imgur.com/a/2dypd . I can't imagine two separate background images would work as they wouldn't line up when resizing the window.
The only solution I can think of is creating two plain white divs to overlay on one single div but that seems like a dodgy way to go about it. I'm not expecting a hunk of code to be written for me, maybe just explain if it's possible and a reference so I can learn. Cheers.
Based on #cale_b's comment, you can set the same background to both div's and then use the background-position property to do the delusion of background sharing.
Then you can use media queries to make it look good in mobile too.
Here you've got a simple example that looks like the one you posted:
#wrapper {
width: 800px;
font-family: sans-serif;
}
#top {
height: 200px;
margin-bottom: 20px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 0;
line-height: 150px;
color: #FFF;
font-size: 32px;
text-indent: 50px;
}
#bottom {
width: 500px;
height: 100px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 -220px;
}
#bottom ul {
list-style: none;
}
#bottom ul li {
display: inline-block;
list-style: none;
padding: 0 10px;
line-height: 50px;
color: #000;
font-size: 24px;
}
<div id="wrapper">
<div id="top">
I'm a banner
</div>
<div id="bottom">
<ul>
<li>I'm</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
</div>
As I understand, you want to use only one image copy of one image over two div and you dont want to use any overlay.
So you can do the following:
On the bottom div, use background-position-y:-100px or any other desired value. This way you push the image upwards.
This looks promising so far, but you will face an issue with the size of the background size specially if you are making a responsive web page.
I would say that background-size:100% 100%for both div would do the job yet it will make the image stretching (unless you go really responsive).
I still recommend using an overlay or even a ready made image. But if you insist on using two div then the above steps should be enough while you have to make your design suitable for this image.
N.B. keep in mind that you might need to use background-repeat:no-repeat
I'm trying to get a responsive image slider. It musts:
Fill the height of a div
Overflow on width
Be centered
It should be similar to http://www.niraalpina.com. I'm looking for a cross-browser compatible CSS solution that doesn't involve fixed dimensions.
I've uploaded the site to http://test5.twinzebras.com/, please have a look and let me know what I'm doing wrong.
Your best bet is to use a setup like this:
HTML
<div class="container">
<div id="img1"></div>
<div id="img2"></div>
</div>
CSS
.container {
width: 100%;
height: 100%;
}
#img1 {
background: url('../img.jpg') no-repeat center center;
background-size: cover; // also give 'contain' a go
}
If cover doesn't do what you want, try contain — I'm not quite sure which you're looking for.
Note: this solution relies on having a fixed-height div around the .container: This is entirely reliant on the rest of your site's setup, so we can't do much to help you there.
You can set width and height to 100% in img
#img1 {
background: url('../img.jpg') no-repeat center center;
width: 100%;
height: 100%;
}
I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.
The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app
(https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540)
but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!
Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?
There is a jQuery plugin called blur.js that claims to do what you want. Haven't checked it though.
I don't know if this will help, but it gives a blur effect.
A similar question was asked here:
Background blur with CSS
The developer used a svg blur to give a blur effect.
Don't know if that helps.
I just figured out how to do this! The background and the content divs both need to have the same background with the same positioning/size. and use background-attachment: fixed on both of them. You can blur the div with -webkit-filter: blur(5px);. You may need to use z-index depending on the location of other things on the page. Also if you want content inside the blurred div it will have to be in a completely separate div positioned on top of it, otherwise everything inside will get blurred too. Here's the code:
<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
<div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
<div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;">
</div>
</div>
<div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
<p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
</div>
</div>
</body>
I couldnt get jsfiddle to work for this, so if someone could make that it would be awesome. The whole idea here is that both the divs have the exact same content in the same place. That way no matter where the blurred div moves it will look like its blurring the background.
you can probably use the css3 filter:blur() property to get the image blurred, but you would need to have the background image the same (and in the same position) as the background element. you would also need to make sure that the blurred element is separate from the content you want to add (:before) because otherwise it'll blur the content as well. You can change the saturation, and other elements as well using the filter property.
I have taken and essentially lightly modified a jQuery image slider to operate how I want, specifically one called: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery.
I am currently attempting to link this slideshow to a separate div below that contains image specific text, I have achieved this in a very simple manor by hyper linking each thumbnail to load the content I want for each image.
Ideally I would like this to happen by using the next and previous controls for the slideshow but have tried multiple solutions without success. My current attempt loads the text for image 1 and image 2 but gets stuck from there onwards.
The html, css and JavaScript for my attempt can be found at http://jsfiddle.net/v9vf9/ (The result does not appear correctly as all my files are for the moment stored locally)
I am sure that what I am trying to achieve is not very complicated but seems to be beyond my ability, I appreciate any advice, help or solutions to succeed with this!! And look forwards to improving my knowledge.
Thank you in advance, Carl
So, as suggested in the comments
http://jsfiddle.net/lollero/Sw4y8/
It's a bit easier to put the text inside the animated slides so that they are animated with the images automatically and most importantly give #slides element a bigger height where the text can fit in.
HTML:
<div class="slide">
<img src="http://placekitten.com/g/500/230" alt="" />
<div class="text">Text</div>
</div>
</div>
<div id="thumbnails">Thumbnails</div>
CSS:
#slides {
height: 550px; /* or what ever amount is big enough to fit the text there too */
float: left;
position: relative;
z-index: 5;
}
#thumbnails {
float: left;
clear: both;
position: relative;
z-index: 10;
top: -110px;
}
.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }