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/
Related
I understand how everything is supposed to work but I have no idea why it is not working. I am trying to have my page to have two main fixed divs. The left one stays the same at all times and the right one overflow downward when there is more content.
This as of right now works perfectly. The problem is the body or my #bodywrapper divs or anything I make to have a min-width to store the #header and #bodyholder so that when the page shrinks to lower than 1280px horizontally it will require the whole page to overflow/produce a scrollbar so that you can see both the #header and #bodyholder divs. I have attached examples of what I am talking about.
since I do not have 10 rep points yet so here are the links to the images:
correct:
s1190.photobucket.com/user/obancooper/media/ex-correct_zpssnk69nck.png.html
wrong:
s1190.photobucket.com/user/obancooper/media/ex-wrong_zpsszf6kkoj.png.html
To help, the following is the best I can describe in HTML/CSS what the problem is:
html:
<div id="bodywrapper">
<div id="header">
</div>
<div id="bodyholder">
</div>
</div>
CSS:
#header { top:18px;
left:0px;
padding-right:0px;
height: 100%;
width: 18%;
position:fixed;
margin:0px;}
#bodyholder {width:82%;
min-width:1050px;
right:0px;
overflow:auto;
height:100%;
position:fixed;
}
#bodywrapper {
width:100%;
min-width:1280px;
overflow:scroll;}
My site is pumpingfe.com.
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 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%;
}
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/