I'm trying to build a very simple one page website. Here's a wireframe model:
I have a very large background graphic (1920 x 1080) and I would like it to cover the whole page and when the browser window is made smaller, I would like scrollbars to appear (or something similar; the point is that the bg resizes). The page will also have some header text and a logo in the middle and a button below it and some text under a line after that.
I have tried:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But if I make the browser window too small, it shows up wrong. I experimented having the top most and bottom most text IN the background graphic but after resizing to a very small size the sides of the text get cut off.
Another thing that almost works is this:
body {
padding: 0;
margin: 0;
background: #f8f7e5 url('../images/background.jpg') no-repeat center top;
background-attachment:scroll;
width: 100%;
}
But the text won't play nice with that.
So my question would be, what would be the best way to achieve what I'm trying to do?
I would use background-size: cover for my background-image. It is well supported except in IE8. I would also set my background-image in media-queries so that I could have one or more smaller images for smaller size resolutions and use the larger image only on the largest devices. This way a small mobile device doesn't need to download a giant 1920px x 1080px image.
Your media queries can also be used to set your text for different devices. For example, you could have 3 divs for the text at the top of the screen that are each set to a width of 33.33333% and floated left so that they sit side-by-side on a desktop size screen. On the smallest devices, such as a mobile phone that is in portrait mode though you could set each of those columns to be 100% so that they are one on top of each other.
It requires a little thoughtful planning before hand, but if you're having trouble, sit down with a pencil and a paper and make 3-5 mockups for how you want things to look at different screen sizes. It could be as simply as one for a mobile device, one for a tablet device and another for a desktop device. Build your css for the smallest device size and make that look reasonably good, then create a media query for the next largest category of screens and start adapting your css to fit those size devices, and then do the next.
Here's an example of what I think you might be looking for. I used background-size:100% 100%; so it will distort your image when you resize your page if the image isn't large enough. But it does always cover the entire background. Hope this helps!
http://jsfiddle.net/JF9me/
Related
I am making a webpage which has a fixed header and then three columns below. I am using columns of the bootstrap grid. I am giving each column a background image and a couple of lines of text. What I want is for the page to be broken into three even sections under the header, which stretch to the bottom of the page, filling it but not causing a scrollbar. I would like the background images to scale (not crop) when the window is resized, and for text to remain horizontally and vertically centered in its column. When the window is made narrow, or on a mobile device, I would like the three columns to stack on top of each other, with heights that together fill the screen.
I made a diagram to show what I want vs what I get:
http://i.stack.imgur.com/y7PUL.jpg
What I am getting is the columns do line up side by side in a larger window, they do scale when I resize the browser window, and they do "stack" when the window becomes narrow like a mobile view, so those things are all good. However, the bootstrap columns will only be as tall as the text I put in them. I do not want them to "wrap" the text, I want them to just "stretch" to fill the page despite having little text content. All of the similar questions I have seen on this site about making bootstrap columns longer involve making the column long enough to match an adjacent column which contains more text. If I add more text the column extends, but I do not want that. I also would rather not set a fixed height in pixels, and I am wary of using tables.
Based on different questions, so far I have tried several solutions including using flexbox, background-size: cover, and setting min-height or height to 100% in several places. By setting height to 100% (including in html and body) I can get the images to fill the page, but they fill the page + the height of the header, creating an unwanted scrollbar, AND it makes the images seem to crop instead of scale upon resize, AND it makes all of the columns be very tall in the mobile style view, leading to a scrollbar.
I would prefer the answer to use just CSS and HTML, but I am open. Thanks in advance!
I made a fiddle with a very (ugly) stripped down version of my page, with some stock backgrounds:
https://jsfiddle.net/qbjk7v60/27/
(note, the fiddle seems to only show the columns in the view where they are stacked, but you can still see the issue with the white space instead of the columns filling)
.column-edit {
height: 100%;
text-align: center;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
For desktop
.col-md-4 {
height: calc(100vh - 59px);
}
For mobile
.col-md-4 {
height: calc((100vh - 59px)/3);
}
Explanation: In CSS, percentage is always width. ie, height: 30% sets the height to 30% of the width of the screen/parent element/whatever. Its obnoxious VH stands for View Height. And it is essentially percentage (of the screen height) for height (there is also a VW for those wondering). What I did was tell the element to find the full height of the screen, subtract the header (for mobile: divide by 3 for obvious reasons) and set the height as that. It works in the fiddle, but you'll want to change 59px to whatever size your actual header is.
I'm sure I poorly structered that question title, but this is what I'm trying to do:
Key: image = moving picture behind submit form
Problem 1: Get the background image to stay at that perfect size no matter the width of the page.
Get the entire frame of the moving image showing.
When the image is at the perfect width (http://gyazo.com/702e443a6b814b1abc26a801836f4d6f) it shows the entire image.
When the width is increased even more, the image starts to 'zoom in'. (Which I don't want.)
Problem 2: On mobile devices with much smaller screens, most of the image is cut off (and you can't scroll to see the rest).
Get the entire frame of the moving image showing.
Have the entire image centered and the user should be able to see the entire frame of the image.
This is what my code looks like for the image:
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
height: 60%;
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
jsfiddle
You need to do the following:
#top{
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
height: 60%;
background-position: center -150px;
background-repeat: no-repeat;
}
Because you were using the background-size: 100%; you're telling the browser to scale the image for you. By removing it and positioning the background you'll achieve what you want with the image never resizing.
Fiddle
Note: You'll need to make sure that your image is large enough that when the page is stretched really large that you won't see the background. It will be hard to do, given that screen resolutions are getting so large now.
#your_image_container_id {
width: 100%;
}
What you are trying to say is called "Responsive Web Design". In order to achieve RWD, you never use absolute units such as pixels, points... but rather use relative units such as %, em which scales according to size of the screen. but you have do some calculation though such as %, make sure all elements on same row do not have the total of with percentage of over 100%, or something like that and also have to compensate for paddings and margins.
Currently, I have a mockup website www.hush.technology
and on my windows (17 inch) computer the website background is full screen
but on my mac (13 inch ) the width of the picture is cut off on the right. I generally like to solve problems on my own but I can't figure it out.
my css looks like this
// CSS CODE
.bgimage {
background: url(image url);
background-size: cover;
width: auto;
height: 720px;
}
Would anyone know why this is happening. I would love an explanation.
From here
background-size:cover
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I assume the aspect ratio is off, and it is clipping part of the image.
I'll try to build on what both of these answers have said. But I'll tell you in short: there is no solution to what you're trying to achieve because it isn't possible. Here's why:
The first box from the left shows what you have as a full screen browser - your image background perfectly covers the screen as you want it to. Your screen is the same size as the background and the image ratio is kept.
The box in the middle shows what happens when you resize your browser (or view on your 13" mac, which I'm assuming is a lower resolution). The image gets cut off the left and right! But why? Because the image is doing what it's been told to: keep it's ratio and cover the entire screen. They both have to be met, and the background image doesn't care whether all of itself isn't visible - it just cares that the screen is being covered and the ratio is the same.
The final box (one on the right), is the implementation of user3739658's answer. You've told the image you want it to make itself entirely visible, and keep the ratio. The consequence: it can't cover the whole screen anymore.
Your background image can only be guaranteed to do two of the three at any given time.
Cover the screen
Keep the ratio
Show the entire image
Another panel I could show is the image being told to: cover the screen and show the entire image, which would result in the image being stretched one way or the other.
The Solution
The easiest thing to do is to remove your static height: 720px;, which means the div can now resize based on the width of the browser (to keep the ratio of the background image).
An alternative is to change your background's purpose - your image is mostly made up of three things:
The actual picture on the right
Some largish text on the top left
Lots of background colour
You can split the background up into just having a picture on the right, and text on the left, with your background now being just a colour. The advantage of this is that the image will always show at the right of the screen, and your text will always show (and is now no longer a picture). Both the text and picture will also never skew, since the property being resized is the background color's width: which doesn't matter since its just a colour fill.
Check this link;
Perfect Full Page Background Image
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
good luck!
first of all keep in mind I uderstand a very little of HTML language...
if you answer, do it as if you'd do it to a 10yo boy...
The question:
I'd like to have a background image in my website and another one on it.
the bg's image can be freely resized to match the screen or mobile size,
but the second one should keep its aspect ratio....!
http://www.flickr.com/photos/110747328#N03/
![you'll see on the left the full screen size and on the right the mobile size][1]
I dont know if understand you correctly. Here's what I get:
You want your bg image to be dynamically resized according to the size of the screen, but not the "content".
You can get the first by using the "background-size: cover"'s CSS property for your background:
body {
background: url('path-to-your-image.jpg') no-repeat center center fixed;
background-size: cover;
}
After that, if you just create a div and put your content in it. You'll get what you want: for the background to be resized and the content to keep its proportions.
Here is a live example: http://jsfiddle.net/agarridob/8NtwE/
By the way, I strongly recommend that you take a look at http://www.bentobox.io, where you'll find lots of resources that will help you understand a bit of what this HTML & CSS is.
So I have a background image that is a bit taller and wider than normal browsers.
I'd like to be able to have it so that it scrolls it proportionately to the size of the screen. Since it is longer than normal, i'd also like it to scroll down gradually as the user scrolls down the page until the user reaches the bottom.
To put it simply, I think
Let's assume the side height is 1000px, and my image is 1500, i'd like the top to start a the page and be sized so it fits the user's screen, however the bottom 500 i'd like to have scroll at half the speed so as the user scrolls down it slowly scrolls till it reaches the bottom.
I'll find a simpler website later, this conept is hard to put into words and google.
If anyone understands, please help!
I need to use css or something
2 Things you should make before posting.
Show some code / attempts
Inspect your sources.
As far as I could see on the website you have provided, they are using simple one image which is 400px x 400px and the other which is 53px x 54px and it repeats both ways (height and width).
This is the background image:
(source: geek.nz)
On the back of that PNG image is the following image:
It is a GIF image.
They use the following on their CSS, which you should have had a go on it!
#ground {
background-image: url(bg-green.gif);
background-repeat: repeat;
background-attachment: fixed;
}
#clouds {
background-image: url(clouds.png);
background-repeat: repeat;
background-attachment: fixed;
padding: 5em 0;
}
Is that what you are looking for?