I want to create website based on the 1140 grid system with a "landing" image that fills the whole browser, so you'll have to scroll for the content.
So, basically, when you open it, you see this image (with height and width that fill 100% percent of the browser, without any constraints) and when you scroll you see the rest of the page, which is in centered and in columns.
Please not that I want the "landing" image to be scalable as well - it will fit an smartphone or tablet widts as well.
It sounds like you are looking for something like this. It is a very basic layout, but you should be able to get the idea from that fiddle.
Basically, you just create a <div> with 100% height and width. It will take up whatever size the browser is, then you can add another block element below that to house your other content.
<div style="height:100%;width:100%;">
<img src="http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg"
style="height:100%;width:100%;"/>
</div>
<div>
here is some other stuff</br>
here is some other stuff</br>
</div>
Related
Goodday,
I want to know how you can made something like the following website?
http://modeltheme.com/travelogue/background-image/
If you resize the window the images fill the page for 100%. But if an image width doesn't fit the width it gets below and the other image fill the page back.
How can I made this for my own? Know somebody how?
Try this, it should work for each resolution. This will spread the image on whole container.
<style>
.background_cover{ background-size:cover;}
</style>
I am designing a site that sells apps. Each product page contains text with screenshots. I'm having trouble controlling the size and behavior of the images.
Each screenshot is a different size and shape - some being tall and narrow while others being short and wide.
My question:
How am I supposed to control the size of these images? Some are perfect at 100%, but some others would be way too big at 100%. So if I set a value in the css, it will be ok for image 1,3,6,9 but not for images 2,4,6,8 (and obvioulsy there are more than 2 types of sizes...).
I tried using max-width, but that obviously failed because if one picture exceeds the max-width, it will be scaled down, while another will not - this produces a funny looking page!
Am I supposed to do local styling for each image in such a case?
And if the answer is that local styling is required here, does that mean that each page needs it's own media queries also to resize responsively?
Thanks.
You can make 5 css class, named .width1 to .width5, having width value from 20% to 100%.
When adding an new image, choose a class that fit your need.
If you need more precision, create a set of 10 class instead of 5 !
Edit : as promised, the code :
.size1{width:10%;}
.size2{width:20%;}
.size3{width:30%;}
.size4{width:40%;}
.size5{width:50%;}
.size6{width:60%;}
.size7{width:70%;}
.size8{width:80%;}
.size9{width:90%;}
.size10{width:100%;}
So the image :
<img class="size2" src="..." />
will be 20% wide.
Some computers have smaller displays, so, how do I put an image that will resize to go across the whole page? This is for a banner.
Also, if it does resize, won't the quality change?
easiest answer: <img width="100%" src="path/img/img.jpg">
This will make the image fill the container that it is located in. If that container, a <div> for example, is smaller than the width of your screen then the image will not fill the width of your whole screen as it will only fill the width of the container element.
I'm currently working on my project adding a mobile friendly design using CSS3 Media queries. I'm progressing fine, but I have a problem on the main page: When resizing the browser it gets stuck at 381px and doesn't go any tighter. My design should go all the way down to 240px in width.
It's the easiest to just give you the link to the page in question http://dev.hobbyathletes.com
There must be something in the container <div class="content"> that blocks the resizing. I can't find it though. All the containers within have widths in percentage. There is a wowslider element in there, but I hide it with display: none at a width less than 480px
On http://dev.hobbyathletes.com/blogs it works fine, where the container <div class="content"> is basically empty at the moment.
Your help would be very much appreciated!
Is it possible to set width in CSS in percents of height? Like on picture:
No, you can't do this with CSS.
You can not set height like that in css.
There is little use even if You can, because different users have different preferences about using toolbar which occupy height on monitor, some even have multiple lines of bookmarks, some view Web in full screen - therefore there is no point of setting page layout according to browser height.
Only good recommendation is setting width to 1000px because most current day monitor resolutions can display that without horizontal scroll.