I am trying to get an image to fill a page using a bootstrap css template and additional custom css.
html:
<head>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="cover.css" />
</head>
<body>
<div class="my_banner">
<div class="col-lg-8">
<h3>Title</h3>
</div>
<div class="col-lg-4 ">
<a class="btn btn-success">Ok</a>
</div>
</div>
</body>
cover.css:
.my_banner {
padding-top: 50px;
text-align: left;
color: #f8f8f8;
background: url(image.png);
max-width: 100%;
height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
However the image only fills about 1/3 of height of page when browser width is small and about 1/10th of the page when browser width is made large. How can I get the entire height always filled?
Just need to set height to 100vh, that means you will fill all the height value of your browser
.my_banner{
height: 100vh;
background: url(image.png) center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}
Working codepen example: http://codepen.io/anon/pen/rLNyvw
you can also use background-size property fir this like:
`
.my_banner {
padding-top: 50px;
text-align: left;
color: #f8f8f8;
background: url(image.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}`
Related
I have a image with the size of 320 * 436 and some particular text data. I need to implement the webpage with the background image as stretch and fit to the screen and the text over the screen. Please help me to implement this using HTML and CSS. Below I have mentioned the code that I have tried. But it does not works:
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<html>
<head>
</head>
<body>
<div class="container">
<img src="background.png">
<p>Data</p>
</div>
</body>
</html>
Thanks in advance
You can achieve this by setting your image as a CSS background image with background size set to cover.
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
This will stretch your image to cover the screen, you can then position your text over it.
body {
background: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center fixed;
}
My background image is not covering the full page when I type in my nav bar. I have set the background width and height to 100%, which I thought would solve the problem.
https://jsfiddle.net/oefu0rmk/
CSS
#intro {
background: #151515 url(../img/b1.jpg) no-repeat center bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: 650px;
background-attachment: fixed;
width: 100%;
height: 100%;
min-height: 720px;
display: table;
position: relative;
text-align: center;
}
.intro-overlay{
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #111111;
opacity: .85
}
HTML
<nav>
about me
about my parents
My hobbies
</nav>
<body>
<section id="intro">
<div class="intro-overlay"></div>
<div class="intro-content">
<h5>Oh, hi there! My name is Tatsu</h5>
<h1> (Tah-T-Su)</h1>
<a class="button stroke smoothscroll" href="#about" title="about me button">find out more about me</a>
</div>
Your code doesn't match your fiddle. The problem is you are not adding the background to the whole page, rather to the #intro element. There is copy outside of this <section>.
Add this to your fiddle and it will extend to the full page:
body {
background: #151515 url(../img/b1.jpg) no-repeat center bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: 650px;
background-attachment: fixed;
}
Try this
html {
background: url(xyz.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body
{
background:none;
}
This will definitely work.
This will work perfect in you global styling sheet.
html, body {
overflow: auto;
}
I have a banner div:
<div class="background" style="background: url(<%= #banner.image.url(:big) %>) no-repeat"></div>
and corresponding css:
#banner {
width: 100%;
height: 275px;
}
#banner .background {
width: 100%;
height: 275px;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
uploader.rb:
version :big do
process resize_to_fill: [1920, 280]
end
On smaller devices, the background-image is cropped, here are the screenshots. Full width:
And a resized window:
Is there any way to make the image be resizable when the screen width becomes narrow? Thanks.
Just use background-size: contain for this
#banner .background {
background-size: contain;
}
try background-size: 100% auto;
I'm trying to cover up a html body background image by another image. I used z-index but can't get it working. Am I missing something or just can't understand what I'm doing.
See sample code below:
body, html {
margin: 0;
/* The image used */
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://lorempixel.com/output/food-q-c-640-633-1.jpg');
z-index: 10;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}
.content {
/*height: 700px;*/
height: 100vh;
background:rgba(255,255,255,0.5);
/*margin-top: 20%;*/
}
<div id="main-content">
<div class="content">something in here..</div>
<div class="content">something in here..</div>
<div class="content">something in here..</div>
</div>
Additionaly, inside the main-content are divs with 100vh and
background opacity
Main content images should be on top of everything including the content div with background opacity.
Use 100% width and height on #main-content, like:
#main-content {
width: 100%;
height: 100%;
}
Have a look at the snippet below:
body, html {
margin: 0;
/* The image used */
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://placehold.it/500x500');
z-index: 10;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
width: 100%;
height: 100%;
}
<div id="main-content"></div>
Hope this helps!
It will work if you define a height for the div with CSS. Or insert content so it will expand vertically.
A background image makes sense for an element that contains more content, otherwise you can insert the image with <img>
You mean something as below, if so then set #main-content height:auto and it works fine, if you set height:100% then it takes that as 100vh, which on scroll hides image placed at top, so try as below.
So now #main-content height:auto calculates and takes height assigned to child elements present inside it and the background image which is assigned to this div #main-content can be seen only till height of 100vh, after that the default image that is assigned to body get visible.
body, html {
margin: 0;
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://placehold.it/500x500');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width:100%;
height:auto;
}
.content {
height: 100vh;
background:rgba(220,60,60,0.6);
color:#fff;
}
<div id="main-content">
<div id="main-content">
<div class="content">something in here..</div>
<div class="content">something in here..</div>
<div class="content">something in here..</div>
</div>
</div>
on this page i have a background image on the <body> tag and i'm wondering if it's possible to add a link to it so it clicks through to something.
if this isn't possible, how would i add a wrapper <div> that would be hyperlinked?
<body id="index">
</body>
body#index {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-image: url(//) !important;
background-size: cover;
background-repeat: no-repeat;
background-color: transparent !important;
background-position: center;
width: 100%;
height: 100%;
check if this is what you want
<body id="index">
</body>
CSS
body#index {
background-color: red !important;
width:100vw;
height: 100vh;
}
Jquery
$('body').click(function () {
location.href="http://www.google.com";
})
fiddled here
try this