i am building a landing page, it must be responsive. but i have one small problem. i am having trouble while trying to define the background image. what i want is that on landscape mode the image will take the full width of the device screen but also to be in its full height like in this example
i see that they are using some framework, how can i do it without any framework.
when i try to do it i use background size:contain, but it maches the background image to the device screen height.
i have seen some exampels i which an image is placed in the html and it is converted to background image. i think that with z-index: -9999;like in the example i gave . but when i try it the image does not go to the background.
Any help would be great
You can use vh and vmax to do this.
An example:
CSS:
#im-full-height {
background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Philippine-stock-market-board.jpg') center center no-repeat;
background-size: 100% 100%;
background-position: contain;
height: 100vh;
}
HTML:
<div id="im-full-height"></div>
Demo
A demo based on your JSFiddle link: https://jsfiddle.net/z1L12opp/2/
You will find below the demo of the JSFiddle I created that fits your need. I used new CSS dimension property vh, which let the element take X percent of the Visible Height.
Refering to the Can I use website for vh property, your code will not run in IE8 and below, and may probably not work properly in further version.
editable JSFIddle / Full screen JSFiddle
EDIT : the background follows the scroll
Related
Can anyone explain to me the concept of images to be responsiveness? And where we should use width and height for images some told me that .it is not correct to take width and height for images can anyone elaborate.
For image Make width:100% and height: auto; that will work for responsive.
but the parent element may or may not have width. Fixed width and fixed height is good practice.
When you use responsive images in your page it means you show different sizes of an image based on screen size. for example, on mobile screen you show a smaller image and on desktop screen you display the same image but with bigger resolution. this logic can be done through html or css.
If you want fully responsive image - you can use div with background image, background-size: cover(or 100%) and background-position: center center
I have a problem when loading the mockup of my project on an iPhone.
The problem is that on my mobile device, most 100% containers seem to have some kind of a right margin or padding, which leads to content crash.
I really think that probably this is due to "viewport" stuff, which I don't know for now, but anyway, take a look.
when seen your screenshot, Your code is up to date, when I put my image in your code then it's working fine, so you can check your image width and check css
check with this #0a1a19 url("../img/img2.png") no-repeat scroll center center / 100% 100%;
If you want to make responsive then use bootstrap and you can get from here....Bootstrap
But you are used custom css so you need to use media query for different layouts like, tablet, mobile, etc...
and one more thing if you not getting perfect layout in your mobile view then must check your media query for mobile view.
Note: always use % (not px) to give the width of any image.
.header__inner has fixed width, change width to 100% and remove padding for mobile devices:
#media <params go here> {
.header__inner, .header__inner_mod {
width: 100%;
padding: 0;
}
}
Codepen
I've been looking for inspiration, I've been out of the HTML game for many years now. I've decided to work on a project to get back into the swing of things. I see a lot of websites now with full width header images which look pretty impressive. The main thing I see is that they react to the width of the viewport.
I have an image (which is around 5000x1300px). I know may be a little extreme for what I'm using it for, but that's the image I've been given. What I require is a full width header that focuses on a specific part of that image with the overflow hidden, but if the viewport is made bigger more of the image will be revealed.
The way I've tried it so far, the browser tries to squish 100% of the 5000px width into the viewport which makes the image looked warped and squished.
Is there an easy way around this?
Possibly aim for the bit you want to focus with percentages.
HTML:
<header></header>
CSS:
header {
background: url('your image') 20% 20% no-repeat;
height: 100px; /* ? */
}
Example: http://jsfiddle.net/Q6kHZ/
Use background-size to scale the image; ex. background-size: 960px 600px;
http://jsfiddle.net/Q6kHZ/2/
So I am trying to use a background image in the bottom left of my page but I want it fixed and to resize with the browser window.
The only way I get close at all to reaching this goal is using 'background-size: 100%' However, that then makes the image TOO tall. So I'm not sure what to use to actually make it fit.
Any suggestions?
This is my current code...
body {
background-color:#000000;
background-image:url(Image.png);
background-position: 0% 100%;
background-attachment:fixed;
background-repeat:no-repeat;
background-size: 100%;
}
Well, background-size takes more than just one value. You could try something like this:
background-size: auto 100%;
However, for simplicity, first try:
background-size: cover;
This would make the width of the background automatically adjust to the aspect ratio of the 100% height. This guarantees that the background image will never be smaller or larger than the height, but the width is variable to the aspect ratio of their browser.
ADDENDUM
Also note that background-size is not supported in all browsers. If support for Internet Explorer is an issue for you, then I'd strongly suggest a Javascript fall-back. I'd also highly suggest reading the always lovely Chris Coyier's article on the "Perfect Full Page Background Image". It discusses fallbacks of all kinds!
I'm getting a problem in html and css,
I used a bg image for my popup window whose size is 500px width and 400px height;
having a scrollable text in it. but problem is that if i reduce a size of browser it get distorted. Please help me if i can make it scalable background and according to that text as per browser size.
Thanks
Mayur Mate
You cannot scale a background if you defined it as part of your CSS without using some JS. In the example below, the black part of the background would scale/resize with the browser window but the image would not; the img would just happily sit # top:0, left:0, render 1:1 and laugh at you.
/* Black will scale, images does not */
#someDiv {
display:block;
width:100%;
height:100%;
background:#000 url(someImage.jpg) 0 0 no-repeat;
}
If you need to have your background image in your CSS for whatever reason, then read this http://css-tricks.com/perfect-full-page-background-image/ for how to manage scaling CSS backgrounds w/ JS
or
If you defined your background as an img then you have a better chance and you don't even need to use JS (although you probably should if you want to maintain ratio/scale).