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;
}
Related
So I want to center an image inside another image (a computer screen), but it seem not to work with the overflow:hidden. I put posiition:absolute on the image inside, but then the other image disappered.
My CSScode:
.desktop-image {
background-image: url("image-1.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.desktop-image img {
width: 20%;
position: relative;
z-index: -999;
left: 40%;
}
My HTML:
<div class="desktop-image">
<img src="image-2.jpg" alt="">
</div>
</div>
set your "computer screen" image as a background of a div
div {
background: url('computer-screen.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
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 have an image that I am using inside a Div.
I was wondering how I could center the image both vertically and horizontally at all times.
At the moment, when I stretch it, it seems to be stretching from the top left corner, is there a way I could have it centered at all times.
I have searched the web and tried various things but can not seem to get it to work.
this is my html:
<div class="container"></div>
here is my css:
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Any help or advice is appreciated, thank you in advance.
EDIT you can see that when I stretch the browser, it
seems to be stretching from the left, i want to be able to have the
Image centered so it stretches from all sides equally*
I got the solution..!
Here is your html file :
<div class="container"></div>
CSS file :
.container {
width: 100%;
height: 75vh;
position: absolute;
margin: auto;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
top: 0;
left: 0;}
Here is working demo
background-position: center will align your image in vertical and horizontal center.
Check below snippet:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-repeat: no-repeat;
background-position: center;
}
<div class="container"></div>
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size:auto;
}
<div class="container"></div>
HTML :
<div class="container"></div>
CSS :
.container{width: 100%;height: 75vh;position: absolute;margin: auto;background-image: url("http://i.stack.imgur.com/2OrtT.jpg");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;top: 0;left: 0;}
I have a background image that I want to show after the top header. This image should be on the remaining of the page. At later stage I can even have a footer and the image should take up the whole empty space between the header and the footer. I am trying to have this background image in the empty space so that on top of the image I can have my div's that show content etc.
I was successful in achieving this when I simply put the image in the body background, however, now I want the background image AFTER the top header ended.
Example: http://jsbin.com/opokev/2
CSS:
.backgroundimage {
background: url(http://s1.postimage.org/ur0h52mvy/Sketch2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div#masthead {
background-color: #262626;
height: 85px;
padding: 0;
position: relative;
width: 100%;
z-index: 500;
}
HTML
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">
<body>
<div id="masthead"></div>
<div class="backgroundimage"></div>
</body>
You can set your image as the body's background-image, with an offset for the header, like this:
body {
background-image: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg');
background-position: 0px 85px;
background-repeat: no-repeat;
}
div#masthead {
background-color: #262626;
height: 85px;
padding: 0;
width: 100%;
margin: 0;
}
body { background: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg') no-repeat; background-position: 0px 85px; }