I want to make so that when the user visits my site to see only one image (100% width) and when he scrolls down to be able to view the rest of the site.
I've seen this and tried it...it works: Full page background image with vertical scrolling
But i have two main concerns:
By this method i must use position: absolute for every section below the image (I will have at least different 4-5 sections with content). Is that the right thing to do ?
This method does not seem to be responsive, is there a way to make it ?
You don't have to use position at all. Once you set a div's size with the screen size all the rest of your content will be below.
Here you go: example
The image div will contain your image, and you set it to width: 100% and height: 100%
then, just add your content below this div.
HTML:
<div class='image'>
<img src="image.jpg" />
</div>
<div class='content'>Content</div>
CSS:
html, body{
margin: 0;
height: 100%;
}
.image{
width:100%;
height:100%;
background: green;
}
.image img{
width:100%;
height:100%;
}
.content {
width:100%; height: 100px;
}
You also need to add
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
to support all screen sizes.
Try this: http://jsfiddle.net/stddC/
In this way the image will be 100% height and width and won't mess with the content.
Related
HELP.ive been searching a lot about how to code an image where it can overlap the margins of the page in network solutions.im not that good yet but believe me i spent nights already for trial and error and im not that good yet especially in css.and im not using mobile view in the website im making but is it possible that if there is a code for the width of the image like it will widen from both ends of screen but it will automatically resize to fit in mobile view pleas sombedy help this is my last coding that didnt work.Please help me
My tried code:
#responsive-image { width: 100%; height: auto; }
<img src="http://users.neo.registeredsite.com/4/2/5/19587524/assets/qwertyuiop1.jpg" id="responsive-image" />
PICTURE OF WHAT I WANT TO HAPPEN:
Always use img tag inside div in the any html project.
div{
width:100%;
}
#responsive-image { width: inherit; height: auto; }
<meta name="viewport" content="width=device-width, initial-scale=1">
<div>
<img src="http://users.neo.registeredsite.com/4/2/5/19587524/assets/qwertyuiop1.jpg" id="responsive-image" /></div>
If I am not wrong, you want to make your image cover the full width of webpage.
Use 100vh instead of 100%, this will make your width equal to 100% of viewport width
#responsive-image { width: 100vh; height: auto; }
<img src="http://users.neo.registeredsite.com/4/2/5/19587524/assets/qwertyuiop1.jpg" id="responsive-image" />
I hope it helps!
I am trying to make a horizontally scrollable website. I took screenshots of my clients demo website, and labeled them out as images 1-8. To make the site scrollable horizontally I put all the images in a div and set no-wrap property. The problem is: Each image is too big for my screen. I want each image to perfectly fit the size of my view port. My question is: How do I make each image fit the entire screen fully, regardless of screen size?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="jquery-2.1.1.js"></script>
<script src="jquery.scrollpath.js"></script>
<script src="createScroll.js"></script>
</head>
<body>
<div id="scrollable">
<img src="1.png"></img>
<img src="2.png"></img>
<img src="4.png"></img>
<img src="5.png"></img>
<img src="6.png"></img>
<img src="7.png"></img>
<img src="8.png"></img>
</div>
</body>
</html>
CSS:
#scrollable {
display: inline;
white-space:nowrap;
float: left;
}
Try this, use vh with max-height:
CSS:
#scrollable {
width: 100%;
white-space: nowrap;
overflow-x: scroll;
}
img {
display: inline-block;
height: 100vh;
}
See JSFiddle: http://jsfiddle.net/48ck23L9/4/
Note that the second image is originally smaller than the viewport.
If you want something really responsive I'd go with DIV elements and background images. It's about images after all.
jsBin demo (resize to see the magic!)
<div id="scrollable">
<div style="background-image: url(1.jpg);"></div>
<div style="background-image: url(2.jpg);"></div>
<div style="background-image: url(3.jpg);"></div>
</div>
The Simple CSS:
#scrollable{
height:100%;
overflow-x: auto;
white-space: nowrap;
}
#scrollable > div{
background: none 50% / cover;
display:inline-block;
width:100%;
height:100%;
margin-right:-4px;
}
Note: Usign this technique as you can clearly see the images will be cropped-to-fit but every image will do exactly what you asked for:
I want each image to perfectly fit the size of my view port. My question is: How do I make each image fit the entire screen fully, regardless of screen size?
Otherwise, if you want to preserve the whole image, than the answer is banally simple. make it 100% height the container area.
You can use the vh and vw units.
img {
height: 100vh;
width: 100vw;
}
I have a large image file (3838x1049) generated from a dual screen screenshot and I need to create 2 HTML files with each file displaying one half of the image.
I was able to achieve that by using the background sprites and specifying the portion of the image I want to see.
The problem is that the image is displayed in its original size which is larger than a typical monitor resolution. I need it to resize automatically to fit the screen while preserving the aspect ratio.
Can anyone help ?
Here is my current code for displaying the right portion of the image:
<html>
<head>
<style>
img.home {
width: 1899px;
height: 1020px;
background: url(dashboard.jpg) -1930px -1px;
}
</style>
</head>
<body>
<img class="home" src="img_trans.gif"><br><br>
</body>
</html>
Dont have Enough reputation to comment thats why i am putting it in here.
try adding the both styles in a main container then apply the approach of width percentage
<style>
imgMainContainer{width:100%;}
</style>
then put both the right and left images in the main container with widths 100% for each. following is the old answer so consider above only
Try using the percentage instead of pixels in background height and width.
<html>
<head>
<style>
img.home {
width: 100%;
height: 100%;
background: url(dashboard.jpg) -1930px -1px;
}
</style>
</head>
<body>
<img class="home" src="img_trans.gif"><br><br>
</body>
</html>
CSS
.leftImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-hoto-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%;
width:50%;
height:100vh;
}
.rightImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-photo-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%;
width:50%;
height:100vh;
background-position: right top
}
and HTML
<div class="leftImg"></div>
<div class="rightImg"></div>
Try this
I know a lot of HTML but it's all been self-taught and I keep running into these unkowns when trying to make sites that look how I actually want them to.
I want to make my site a minimum of 940 px wide- if the browser is less than this in width, users will have to scroll horizontally.
If the browser is more than 940 px wide however- I want images to appear to "connect" with my header image(show as a full width header) and nav image(show as a full width nav).
Check out the attachment to see what I mean.
Sean
http://i45.tinypic.com/2n862ys.png
In CSS:
header{ min-width: 940px; width: 100%; overflow: hidden; }
.headerImage { display: block; margin: 0 auto; }
Then in HTML:
<header>
<img class="headerImage" src="./Images/HeaderImage.png" alt="" />
</header>
If you have a image larger than the 940px that you would like as your width then you could just set the background position of your image to be centered so if it increases or decreases the image wont move just the amount that is shown.
Another method could be is to repeat the background image so it wont end... but that depends on what sort of image you are using...
Try this
<style type="text/css">
img {
min-width:940px;
width:100%;
height:auto;
}
</style>
I have an image that should be positioned near the bottom of the screen. I have a main image that is the background image and will resize with the browser size. I need the image over the background image to be 20-30px from the bottom no matter what size screen or if the screen is resized. (Image also must be centered.)
I am not sure how to go about doing this. What is the best way to do this?
Here is the code I have tried:
.bottom{
position:absolute;
margin-left: -355px; /* Image is 710 in width */
left:50%;
bottom:-20px;
}
That code has the image centered on the page properly but not 20px from the bottom. Also I have content below the image and I want the content to stay below the image but it currently comes up over the image.
HTML:
<img class="bottom" src="src-path.png" alt="Text" />
<p style="clear:both;"> </p>
<!-- More Content here that consist of img and p tags. -->
I guess to position the image 20-30 px from the bottom you can use css property
margin-bottom:30px; or 20px what ever value suits you.
for aligning at the center use vertical-align:middle Please do share the code that the thing is more clear. Hope I answered it correctly.
CSS Together must look like:-
margin-bottom:30px;
vertical-align:middle;
You better use a CSS file, in which you declare a footer to be at the bottom of your page. Then put your image in your page, with class of that CSS and id of "footer". Clear enough?
Here is the way I finally did this:
CSS:
.image_block {
/* Size of image is where the width/height come from */
width: 710px;
height: 500px;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/*Nothing Specified */
}
HTML:
<div class="image_block">
<img src="src.png" alt="Alt Text" />
</div>