I have applied an effect that I want only for a div parent but it applies also to the children.
This is my HTML code:
#wrapper {
height: 100%;
background-image: url("../asset/banner.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: grayscale(100%);
}
#top-wrapper {
width: 100%;
height: 10%;
background-color: rgba(39, 35, 30, 0.5);
}
<div id="wrapper">
<header id="top-wrapper" class="inline-content">
<div id="logo" class="inline-content">
<img src="asset/logo.svg" alt="Logo">
<h1>portfolio</h1>
</div>
<nav>
<ul id="menu" class="inline-content">
<li>Home</li>
<li>About</li>
<li>Project</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="banner" class="inline-content">
<h2>Hello World!</h2>
<h2>and I am a Web Developer</h2>
<h3>based in London</h3>
</section>
</div>
The logo is a multi colour logo but it appears in greyscale.
Insert an additional div and just position it absolute:
<div id="wrapper">
<div id="test" style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(banner.jpg);
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: grayscale(100%);
z-index: -2;
"></div>
<header id="top-wrapper" class="inline-content">
<div id="logo" class="inline-content">
<img src="logo.svg" alt="Logo">
<h1>Tuffi portfolio</h1>
</div>
<nav>
<ul id="menu" class="inline-content">
<li>Home</li>
<li>About</li>
<li>Project</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="banner" class="inline-content">
<h2>Hello World!</h2>
<h1>I am Tuffi</h1>
<h2>and I am a Web Developer</h2>
<h3>based in London</h3>
</section>
</div>
Obviously, remove everything from #wrapper except the height of 100%.
I agree with all comments: save your background as greyscale. It will save you some KBytes and it will work in IE, too. Much more impressive than using a CSS rule that IE doesn't care about ;-)
Related
This is the html
</head>
<body>
<header>
<h2>Mountain Travel</h2>
<nav>
<li>Tour</li>
<li>About</li>
<li>Contact</li>
</header>
<section class="introduction">
<div class="background-image" style="background-image: url(assets/image/main.jpg);" >
</div>
<div class="content-area">
<h1>Mountain Travel</h1>
<h3>Unmissable Adventure Tours Around The World</h3>
Contact Us Now
</div>
</section>
</body>
</html>
This is the CSS:
.introduction.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
.introduction{
position:relative;
}
However, the image doesn't show up at all. I am sure that the url is correct. Could anyone help me with it?
So first you don't have a valid html structure (your nav tag was not close). Secondly the .background-image is a child of .introduction. So to access it in css you will need to use .introduction .background-image and not .introduction.background-image:
.introduction .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
.introduction{
position:relative;
}
<header>
<h2>Mountain Travel</h2>
<nav>
<ul>
<li>Tour</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav> <!-- Don't forget to close your nav tag-->
</header>
<section class="introduction">
<div class="background-image" style="background-image: url(https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);" ></div>
<div class="content-area">
<h1>Mountain Travel</h1>
<h3>Unmissable Adventure Tours Around The World</h3>
Contact Us Now
</div>
</section>
I use in this example a reliable source (google logo) for your image path. So if in your example it's still not working maybe the source of the image is not the good one.
As mentionned by #KoshVery please don't forget that a li need to be in a ul or ol html tag.
I'm trying to post an image in the CSS but it's not working
I tried adding the file name but still nothing the file works in HTML but not CSS. I'm not sure if this is file problem or if it's because of the multiple imports
#header {}
#top .logo {}
#top.menu {}
#top .img .background-img {
background: url('desk-computer.jpg');
width: 100%;
height: 400px;
}
<section id="top">
<div class="logo">
<h1>92</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="background-img">
<img src=>
<h1>Welcome to my page</h1>
</div>
</section>
You have to put
.background-img{
background-image: url('desk-computer.jpg');
width: 100%;
height: 400px;
}
and remove <img src=> from html file
Kinda new to HTML, want to edit my navigation bar so that it has an image behind it and the nav bar sits at the bottom of the image. How do I do this?
After looking at a few forum posts, this is what I tried:
#cover {
background-image: url("Images\FB Cover.png");
}
<div id="cover">
<div>
<nav>
<li>Home</li>
<li>About DRC</li>
<li>Our Products</li>
<li>Contact</li>
</nav>
</div>
</div>
#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/800/600) no-repeat 50% 50% / cover;
}
menu {
position: absolute;
left: 20px;
bottom: 20px;
}
a {
color: #fff;
}
<div id="cover">
<menu>
<li>Home</li>
<li>About DRC</li>
<li>Our Products</li>
<li>Contact</li>
</menu>
<div>
simple example
to place image as background of DOM element you can use, background-image css property.
For example
background-image: url('https://static.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg');
W3School has great documentation about css properties.
here is the link
I'm trying to make a very simple page, but I'm pulling my hair off trying to find a solution for the layout.
What I want to achieve is a simple header and below, some content ( I don't know the actual height of it, but won't probably cover the full height of the viewport) with a full background cover image that covers the remaining height.
I tried using 100vh on the container that's going to hold the content, but as you can see in the codepen: http://codepen.io/renttless/pen/vGvzRj , it creates a scrollbar apparently the size of the previous sibling, which will be the header.
Here's the code:
<body>
<div class="containerTest">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sectionTest">
<div class="backgroundTest">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</section>
</div>
CSS:
html,body{
height: 100%;
}
.sectionTest .backgroundTest{
background-color:red;
height:100vh;
}
If you add a background to your header and move the 100vh to the html element it will solve your problem
html{
background-color:red;
height:100vh;
}
header{
background: white;
}
body, header ul{
margin: 0;
}
<body>
<div class="containerTest">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sectionTest">
<div class="backgroundTest">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</section>
</div>
This is a pain to do. Maybe try using the flexbox approach. Here's an example.
<div class="box">
<div class="row header">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div class="row content">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</div>
CSS:
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
flex: 0 1 30px;
}
.box .row.header {
flex: 0 1 auto;
background-color: red;
}
.box .row.content {
flex: 1 1 auto;
background-color: green;
}
<style>
header {
text-align: center;
background-image: url('http://i.imgur.com/7L79iny.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
This is the code I'm using to add a background image to my header. How to I make the image semi-transparent without making the rest of the header transparent.
<header>
<center><img src="http://i.imgur.com/EPd7PBU.jpg" height=350 title="source: imgur.com" /></center>
<h1>Taylor's Blog</h1>
<ul>
<li>About Me</li>
<li>Blogs</li>
<li>Contact Me</li>
</ul>
</header>
You cannot change the opacity of a background image with css, only the opacity of an element. However, there is a very easy work-around, that only requires css:
header {
text-align: center;
position:relative;
}
header:after{
content:'';
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background-image: url('http://i.imgur.com/7L79iny.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
opacity:0.5;
}
<header>
<img src="http://i.imgur.com/EPd7PBU.jpg" height=350 title="source: imgur.com" />
<h1>Taylor's Blog</h1>
<ul>
<li>About Me</li>
<li>Blogs</li>
<li>Contact Me</li>
</ul>
</header>
On another note, <center> is depreciated, and should not be used. In fact, in the case of the html you have, the link and image are already centered with text-align:center;, making the center tag useless.
The best way would be to create an absolutely positioned div that is transparent and is layered under the content.
<style>
header {
position: relative;
}
header .background {
position: absolute;
width: 100%;
height:100;
opacity: .5;
background-image: url('http://i.imgur.com/7L79iny.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
sadsad
<header>
<div class="background"></div>
<center><img src="http://i.imgur.com/EPd7PBU.jpg" height=350 title="source: imgur.com" /></center>
<h1>Taylor's Blog</h1>
<ul>
<li>About Me</li>
<li>Blogs</li>
<li>Contact Me</li>
</ul>
</header>