I am using bootstrap 3 i added background image in body its not taking full image, image is cropping below.please help me anyone. i am trying very long back. how to fix full background image in all devices without scroll.
background-repeat: no-repeat;
min-height:768px;
height:auto;
background-attachment: scroll;
background-size: 100% auto;
background-image: url("../images/login/****.jpg");
Since your code is in the body element, if you want a full screen background-image, you can try this
body, html {
height: 100%;
}
Related
I am a student and I'm having an issue with one of the video tutorials regarding using a background image. I followed the code exactly as is in the video but it's not producing the same results. It just keeps showing the image tiled throughout the whole web-page. Any help would be appreciated.
<style type="text/css">
body {
background-image:url(goku.jpg);
background-repeat:no-repeat;
background-attachment: 50% 60px;
}
</style>
Your background-attachment value is invalid, and you should add a background-sizesetting. In the snippet below I used cover to cover the whole screen, but you can also use other sizes. But then you should also add background-position
EDIT after comment: Well then just change to background-position: 50% 50%;. The image - if you don't use background-size will be displayed at its original size, and with that setting, be centered horizontally and vertically. If you don't like the vertical centering, change the second value to whatever you like, also in pixels, if you want.
html,
body {
margin: 0;
height: 100%;
}
body {
background-image: url(https://placehold.it./240x180/fb4);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
<div>Test</div>
My background image doesn't want to scale with the rest of the page. And when I've gotten it to do so, it created a huge white-space gap underneath it when I'm scaling down the page.
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
use background-size:cover for the background-image to cover the whole div.
see here more about this property : CSS3 background-size Property
.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-size:cover;
}
<div class="vintage">
</div>
Try adding the property value cover to your css file.
Like this:
div {
background-image:url('vintagemcdonalds.jpg');
background-size:cover;
}
This enables you to scale the background image to be as large as possible so that the background area is completely covered by the background image.
If some parts of the background image are not visible within the background positioning area, try giving some extra information to your css such as:
width: 100vw;
height: 100vh;
(Note that CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.)
If you don't want the background image to repeat simply add:
background-repeat:no-repeat;
For more info, check " https://css-tricks.com/perfect-full-page-background-image/ " it will give you a good idea of different approaches to be considered when trying to work with a full screen background.
Hope this helps and good luck! :)
I'm reading news on this page mostly on my mobile device:
link
The big banner right of the logo is not scaling properly on the mobile device.
So when you resize the window and make it smaller everything is resizing except the banner.
Im learning php, css and just wondering how this could be solved. Ive checked also on stackoverflow and find something like:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */ }
I've tried this also in the dev. mode of google chrome but it desnt work.
Is this solvable with the provided data from the dev mode?
Code looks like:
<div style="position:relative;
width:728px; height:90px; z-index:10;
background-image: url(http://www.image.jpg);">
Based on your code, the banner is implemented as background image, not an IMG element. To make background image scaled so that it's entirely visible, use background-size: contain. So your user styles could be like this:
.site-header-banner > DIV {
background-size: contain;
background-repeat: no-repeat; // To disable repeating background image.
max-width: 100%;
}
You can use it as a background with the following properties:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
https://jsfiddle.net/alexndreazevedo/xe9tvkyr/
You can define a fixed size to DIV containing image background and change it by media query.
I am trying to create a full width parallax site and having an issue getting background images for sections to scale properly.
How would I get a full width image in desktop view to shrink down and contain a 100% width but the height shrink and image contain proportions to fit the width? The problem I am having is I can't set a background container to have a max height.
I'm really looking for a way for the height to shrink from 100% down when the viewport keeps getting smaller so that the focus of the picture isn't lost and maintains proportions just like a responsive image would.
I have tried background-size: contain as well but even then the container has to a have a fixed height which has to change while the background image shrinks because otherwise the image won't be fluid with the container.
#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}
If I remove the height obviously nothing is rendered in the browser and max-height doesn't work like it would for responsive images.
Can someone please help me with this effect?
You need to use background-size: contain instead of background-size: cover. Demo here
#main-photo {
background-image: url('images/main.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}
I found a solution using a padding trick that adds height and allows the image to maintain its aspect ratio. Thank You!
Just add
padding-bottom: %here
You won't need to specify a height for the background image only a 100% width.
Here is a great article. http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
OK, this one works, the ocean picture shows up in the background but repeated 4 times to fill entire screen.
<style type="text/css">
body {background-image:url('ocean.png');}
</style>
<body>
</body>
Then change to
body {background-image:url('ocean.png') no-repeat center center;}
Now nothing shows up background picturewise.
Here's how you can do this and stretch it to the full height/width of the screen (note: if it is not the right proportion, some distortion will occur):
body {
background-image: url(ocean.png);
background-repeat: no-repeat;
background-size: 100%;
}
IIRC, background-size and being able to write url(...) without quotes are part of the CSS3 standard.
Because background-image can't take more paramters - change it to background: url..., which is the correct property to set all of those in one line.
body {background: url('ocean.png') no-repeat center center;}
Try it this way:
body {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
You can size the background image in the background property as follows:
background: url('ocean.png') no-repeat top center 100% auto;
or
background-size:100% auto;
The first parameter is for the width, the second for the height. The first example will put the image top center and stretch it to fill the browser window in width, and set the height proportionately. You can also use "cover" in place of "100% auto" and the browser will fill the image in whatever way it needs to to fill your background.
Note: this is CSS3, and as such the background-size propery will only work in newer browsers, IE9, Firefox 4, ect.