I am trying to put a background picture with medium opacity but unable to do so, here's my html:-
<body style="margin:auto;width:100%;height:100%;opacity:0.1;background-image:url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg')">
</body>
Use div instead of body tag. And give a particular height to that div.
<!DOCTYPE html>
<head>
<title>Your favourite travle partner</title>
</head>
<body>
<div style="margin:auto;width:100%;height:400px;opacity:0.1;background-image:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg')">
</div>
</body>
</html>`
Instead of adjusting the body elemet, add an extra div to hold the background, better to separate the style into a css file.
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
<title>Your favourite travle partner</title>
</head>
<body>
<div id="background"></div>
</body>
Related
I found a solution to my problem but, I can't wrap my head around why this works. Why would I need the class car-back when my id image has the same code? If I take out the class car-back it no longer stretches my image like I want it to. All I really need is an explanation why I need the class car-back.
Here is my html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initail-scale = "1.0">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div id="image">
<img src="WP_20131026_007.jpg" alt="" class="car-back">
</div>
<p>This should be poppins</p>
</body>
</html>
my css
#import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
body{
font-family: 'Poppins';
font-weight: 200 !important;
/*max-width: 100%;
background-size: cover;
background-repeat: no-repeat;*/
}
#image{
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
}
.car-back{
width:100%;
height:100%;
}
#image is the container of the .car-back image. The #image settings apply only to that container.
width and heigth of .car-back (both 100%) are relative to its container , i.e. to #image.
Without the .car-back class and its particular settings, the .car-back image would be displayed at its original size instead of being 100% width and heigth of its container.
I am writing a website and I have a problem. The background picture is not enlarged.
Here is a picture:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="reset.css">
</head>
<body>
<header class="header">
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
CSS:
.header{
background: url(images/Group2264.svg) no-repeat;
position: absolute;
width: 3000px;
height: 2000px;
left: 0px;
top: 0px;
}
Help me with this please!
The first commenter was right, but you need to use it like this:
.header{
background: url(images/Group2264.svg) no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
background-size: cover; : "sets the size of the element's background image" - MDN.
OR
width: 100%; : to fill up the parent 100%, width wise. (very pseudo responsive)
height: 100%; : to fill up parent 100%, height wise. (very pseudo reponsive)
CSS:
.footer {
background-image: url("./images/footer.png");
height: 45px;
background-position: center center;
background-repeat: no-repeat;
position: relative;
bottom: 0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
</head>
<body>
.. some header divs..
.. some content divs..
<div class="footer">FOOTER</div>
</body>
</html>
Footer is about 10 pixels before bootom. How I can add it to the very bottom of the page?
add this css
body {
margin:0;
}
Unsure how to explain this properly.
I have two elements on my web page that I need to properly align and resize together to match the browser.
The image isn't the current problem, but I have a second element that I cannot get to properly match and resize.
So, the top of my website will have an image that automatically sizes using this CSS code:
.top {
position:fixed;
top:0;
left:0;
max-width: 100%;
height: auto;
z-inxed:0;}
I need another element placed over top of that, covering part of the first image.
Since it will not let me post an image here, which would explain much better than just trying to describe by words, I have posted in here:
As you can see, I want to put the time box I have generated through javascript over the time from the top bar. When the browser resizes, I need it to maintain the position and size with the top image.
I have tried nesting it inside a div, but it seems it will not resize properly.
As per request, here is the code I currently am using:
HTML:
<!DOCTYPE html>
<html id="UbuntuDesktop">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script language="javascript" type="text/javascript" src="https://raw.githubusercontent.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
<script language="javascript" type="text/javascript" src="js/time.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
</head>
<body>
<div><img class="top" src="Graphics\Ubuntu_Desktop_top_bar.png" />
<div id="udclock"><span id=curTime></span></div>
</div>
</body>
</html>
css:
#UbuntuDesktop {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("Ubuntu_Desktop_12_04.png");
background-position: center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top {
position:fixed;
top:0;
left:0;
max-width: 100%;
height: auto;
z-inxed:0;
}
#udtopwrapper {
}
#udclock {
background-color: #4c4b47;
position:relative;
top:0;
right-margin:20px;
float: right;
text-align: center;
z-index: 1;
}
I don't think the js code will help. It is one that I found that will show the current time, and I am creating a dynamically changing time.
You can do something like this-
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cssQ1.css">
<title>Document</title>
</head>
<body>
<header>
<p>Text here</p>
</header>
</body>
</html>
CSS
*{margin: 0;
padding: 0;}
header{background-image:url('download\ \(1\).jpeg');
height:100vh;
background-position:center;
background-size:cover;
background-attachment:fixed;}
p{color:white;
font-size: 200%;}
How would one ensure that certain content is always fitted inside a particular area of a web page?
As an example, I would like the sentence "Fit this inside" to appear inside of the background image. Here is my test.html file:
<!DOCTYPE html>
<html lang="en">
<link href="test.css" rel="stylesheet" type="text/css">
<body>Fit this inside</body>
</html>
Here is my test.css file:
body
{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
This results in the text "Fit this inside" appearing at the very top of the page, and not inside the background image area.
What is the correct method to do this?
JSFiddle: http://jsfiddle.net/u3TAF/
Look at my comment higher.
You've set the background image to be 68% height. set the text into container with same properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<style type='text/css'>
body
{
background-image: url('image.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
}
div.container {
position:absolute;
top:16%;
height: 68%;
left: 0%;
overflow:auto;
}
</style>
</head>
<body>
<div class='container'>
Now it's fit!
</div>
</body>
</html>
I think the best option would be to put the text within a DIV and then apply the styles to that element. Somewhere along the lines of:
<html>
<head>
<style type="text/css">
#test{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
</style>
</head>
<body>
<div id="test">
Fit This Inside
</div>
</body>
</html>
The background image should be given to the parent element. In your case, in the CSS, attach the background image property to the <html> element. So this image would act as a background to all the content of this page.
If that is what your aim is, then:
html{
background: url('bg_img.png') no-repeat center center fixed;
}