I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/
A single paged site with a responsive image that takes up the full screen, on any device. That's my issue I can't figure out a way to get a background image to go full screen on any device.
<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">
I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained.
The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.
Demo Fiddle
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%;
width:100%;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
Related
I've converted two SVG images to css/data images, first time working this way.
I want the images to be responsive, in the centre and with a max-width of 800px.
I have made the height 100% and width 100% but when the browser is narrow, there is a huge gap underneath the images which makes the user have to scroll a long way to get to the next image, I want it right up against it.
I've messed about with this all day and can't figure it out.
I have attached a fiddle to see what I have so far and please see below the css code.
<div class="container">
<div class="front"></div>
<div class="front"></div>
</div>
and here's the css minus the front style as it would not post correctly.
* {
margin:0;
padding:0;
}
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
background:pink;
}
.container {
width:100%;
height:100%;
margin:0 auto;
}
Here's the fiddle:
https://jsfiddle.net/gjkx1ye5/1/
I have an image that I want to resize when the width of the page/screen changes.
This code almost does what I want:
.section
{
position:relative;
min-width:600px;
max-width:1200px;
height:auto;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
.image
{
position:relative;
display:inline-block;
vertical-align:top;
width:100%;
height:auto;
}
<div class="section">
<img src="long_img.jpg" class="image"/>
</div>
The problem is, the image is 2560px wide, and the section is only 1200px. The image gets squashed horizontally to fit, which scales the height down. But, when the page is at it's max width(1200) I want the image to be at full height(400). So I need the image to hang over the edge, but still automatically resize.
The reason I don't just crop the image is because I want to scroll it with a css animation.
I've tried .image{ margin-right:-1360; } but it had no effect.
Use a media query after the css that you have there. This will remove the 100% declaration and let the image be it's natural size.
#media(min-width:1200px) {
.section img {
width: auto;
display: block;
}
}
Also, take away the overflow:hidden from the containing div.
See this fiddle for an example.
I'm trying to make a website using html and css.
I have put 5 divs next to each other and there width and height depends on the size of the window. Then I have put images in each of those divs. the size of those pictures also depends on the size of the window.
The problem that I'm having is that only a part of my image is shown in the div.
The code:
<div id="cotainer">
<div id="bar1"><img src="modern_combat_1.jpg"></div>
<div id="bar2"><img src="modern_combat_2.jpg"></div>
<div id="bar3"><img src="modern_combat_3.jpg"></div>
<div id="bar4"><img src="modern_combat_4.jpg"></div>
<div id="bar5"><img src="modern_combat_5.jpg"></div></div>
this is the style:
html, body{margin:0;padding: 0;border:0;}
#bar1 {top:35%;width:20%;bottom:35%;background-color:red;position:absolute;}
#bar2 {top:35%;left:20%;right:0;bottom:35%;background-color:green;position:absolute;}
#bar3 {top:35%;left:40%;right:0;bottom:35%;background-color:yellow;position:absolute;}
#bar4 {top:35%;left:60%;right:0;bottom:35%;background-color:red;position:absolute;}
#bar5 {top:35%;left:80%;right:0;bottom:35%;background-color:green;position:absolute;}
#bar1 img{
width:100%;
height:100%;
}
#bar2 img{
width:100%;
height:100%;
}
#bar3 img{
width:100%;
height:100%;
}
#bar4 img{
width:100%;
height:100%;
}
#bar5 img{
width:100%;
height:100%;
}
Tthe result is that the 3 pictures in the middle aren't completely shown in the divs
can someone help me so that the 3 pictures in the middle are shown completely
You have giver width to #bar1 div only.
Give width to the rest of divs also.
Write:
#bar1,#bar2,#bar3,#bar4,#bar5{width:20%;}
Fiddle here.
Also try using max-width:100% for images;
Hi i'm trying make a website that has a header at the top and and div that loops through some images in the background. at the moment i'm trying just to get it to display one image that is responsive to the screen size so no matter what screen your on the background image will scale to fit the height and width. The problem i'm having is that i can't seem to get display anything without a hardcoded width or height.
heres what i have so far
banner.php
<div id="banner">
<div class="bgslider"></div>
</div>
global.css
/* BANNER */
#banner { style="width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background:#F00; }
.bgslider { style="width:100%; height:750px; position:fixed; left:0;top:50;overflow:hidden; background-image:url(../images/banners/trawberry_Mockup.jpg) }
take out style=" from within the brackets
try this
#banner { width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background:#F00; }
.bgslider { width:100%; height:100%; position:fixed; left:0;top:50;overflow:hidden; background-image:url(../images/banners/trawberry_Mockup.jpg);background-size:cover; }
http://jsfiddle.net/EE2Jc/
I need to fit an image inside a 300x300 div without stretching the image. I've seen this on the huff post, the slider on this page :
http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html
The images are clipped but not stretched.
Instead of using max-width, max-height.
How do I do this?
Those images on the site you linked to are actual size, so the simple answer is just to resize the image.
You can't really do this without "stretching" the image if the image happens to be less than 300px wide or tall, but you can do it without changing the ratio, which is what I think you mean.
Here's the basic idea:
<div><img></div>
If you want to use 300px as a minimum width (you expect small images that need to be bigger), try this:
div {
width:300px;
height:300px;
overflow:hidden;
}
div img {
min-width:100%;
}
Demo: http://jsfiddle.net/Z47JT/
If you want to clip images (because you expect them to be big) but not enlarge them, try this:
div {
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
div img {
position:absolute;
}
Demo: http://jsfiddle.net/Z47JT/1/
Combine both these techniques if you want.
Another way is to simply use background-image on the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-size which isn't fully supported. Otherwise, it's a great easy solution.
Use the flex box solution
Here is the html,
<div><img /></div>
Add styles
div{
width:100%;
height:250px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div img{
flex-shrink:0;
-webkit-flex-shrink: 0;
max-width:70%;
max-height:90%;
}
simple way to do this....
.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}