I am using HTML5 and CSS for designing a page. Will the following block of code set the specified image as background-image for two <div> with classes .headarea and .leo?
<div class="headarea" style="background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg)';width:100%">
<div class="leo">
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95></img>
</div>
</div>
No. You can't reference files directly from your computer's hard drive - try uploading them to a website like http://imgur.com and reference the pictures from there. Most people recommend not to use spaces in filenames, as well.
You've made a mistake here:
background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg)';width:100%
You don't need the quotes:
background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg');width:100%
Also, the classes headarea and leo don't do anything, from what you've posted. You can remove them.
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95></img>
to
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95>
IMG for the closing tag
not required
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.headarea{
min-height: 380px;
background: url('http://logovoi2014.ru/wp-content/uploads/2015/01/TM-Priroda.jpg') no-repeat center top;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.leo img{
border: 2px solid #ccc;
position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
<div class="headarea">
<div class="leo">
<img src="http://catoftheday.com/archive/2014/AprilImages/10s.jpg" alt="" />
</div>
</div>
Related
I have a div with a variable image inside. The max image height is set to 100% so regular images should fill the entire div. However on some screens I can see the background (red in the example) which spills over the image. Is there a way to fix this?
Here is a screenshot of the red line which shows up at random screensizes:
.image.cell {
background-color: red;
padding-top: 56.25%;
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
img {
max-height: 100%;
position: absolute;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
<div class="image cell large-offset-1 large-10">
<img srcset="" src="https://i.imgur.com/eRM6hHb.jpeg" alt="Aliquam eu est lectus">
</div>
Instead of the <img> tag, try using background-image. It generally gives you way more control over the way your images are displayed. I've adjusted your css for you!
.image.cell {
background-color: red;
background-image: url('https://i.imgur.com/eRM6hHb.jpeg');
background-size: cover;
background-repear: no-repeat;
background-position: center;
position: relative;
height: 100vh;
width: auto;
}
You can set the height to whatever you want. The image's width will change automatically.
I have made a changes in your css code, you can check it.
We can provide all the style attributes for .image.cell class.
.image.cell {
background-color: red;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
height: 100vh;
width: 100%;
}
<div class="image cell large-offset-1 large-10">
<img srcset="" src="https://i.imgur.com/eRM6hHb.jpeg" alt="Aliquam eu est lectus">
</div>
I've got a background image on my webpage. Now I want to add content that floats over it. The code below places the content behind the image. How to correct it?
Note that I've borrowed (and I'm trying to get the effect) discussed in this link for background image: CSS-Only Technique #2 from: http://css-tricks.com/perfect-full-page-background-image/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
-->
</style>
</head>
<body>
<div id="bg">
<img src="myimage.jpg">
</div>
<div id="mycontent">
...
</div>
</body>
</html>
Simply set your z-index to a negative value
#bg{
z-index:-1;
}
This has been my goto solution for easy BG images.
You wont need to add the image the the HTML markup - just reference in the css file.
This will also perfectly scale the image for you.
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;
}
Source:
http://css-tricks.com/perfect-full-page-background-image
Please refer to this:
Reference 1
Reference 4
I'm trying to have a full screen image, easy enough with css using the code below.
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
but the image is already placed in an html div, see here
<div class="fixed-background">
<img src="photo2.jpg"/>
</div>
It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.
try this
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
Use object-fit: cover; on the <img> tag:
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
Without using a background, consider this:
#mydiv {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-top: -100px; /* (calculate half the height of your image) */
margin-left: -100px; /* (calculate half the width of your image) */
}
Full screen Image? you could do something like this through HTML
<div class="fixed-background">
<img src="photo2.jpg" height="100%" width="100%">
</div>
http://jsfiddle.net/pj73m4po/
EDIT:
or are you looking for something like this?
http://jsfiddle.net/pj73m4po/1/
Try the following: http://jsfiddle.net/pj73m4po/4/
Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.
The points that I gather from your css are the following:
Center the image
Fix the position of the image (so it doesn't scroll with the page)
Cover the viewport, scale proportionally to fit
That said, I suggest the following given your html
.fixed-background{
position:fixed;
width:100vh;
height:100vh;
overflow:hidden;
}
.fixed-background > img{
position:absolute;
width:100%;
height:auto;
top: 50%;
transform: translateY(-50%);
}
Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vh of margin applied to a sibling element to get things to line up because position:fixed; will break the element out of the document flow.
I have a fullscreen cover background and I'm trying to get a footer over it which darkens the background. However I also need to put a picture on top of it which get darkened as well. I've tried to use z-index and sliced image with transparency but it was just blue and it didn't work.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
}
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
Any help much appreciated.
Edit:
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And the CSS
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And the CSS
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}
try adding
#footer { position: relative; z-index: 9999; }
Where exactly is this picture going? What div is it going into? Because right now if I'm understanding correctly, you just want a box which is on a layer above the background which has reduced opacity. [jsFiddle] Which it is technically already doing.
Can you give us the HTML markup as well? Or input it in a jsFiddle so we can see where the problem is.
Also if Z-indexes weren't working, make sure you are assigning a z-index to every element and not only the #footer.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
z-index: 999;
}
#img_div {
z-index: 1;
}
I'm currently having some problems displaying divs with 100% height in IE, it works fine in every other browser, it's just IE that is giving me some trouble and I'm not sure how to resolve it.
Here's some of my code:
HTML:
<div id="content">
<div id="box-01" class="slide" style="color: #F26964; background-color: #003218;">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
<div id="box-02" class="slide" style="color: #F2F1EF; background-color: #70858E;">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
<div id="box-03" class="slide" style="color: #F2F1EF; background-color: #003218">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
</div>
CSS:
html, body {
margin:0;
padding:0;
height:100%;
border:none
}
#content {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
.slide {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
display: table;
vertical-align: middle;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text-content {
text-align: center;
display: table-cell;
vertical-align: middle;
text-transform: uppercase;
}
So I have a set of relatively positioned divs, each one fitting to the browser window size, like I say this all works fine in every browser except IE, in particular the 100% height style attribute not being recognised.
After doing a little bit of research I found that this may have something to do with the text being in a table (which is necessary as I want to centre the text horizontally and vertically) but I've not got a clue how this issue can be resolved, any suggestions would be greatly appreciated!
There are a number of strategies discussed here:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
This appears to work in IE FF & Chrome:
http://codepen.io/anon/pen/asqpL