So I'm creating a parallax page and i did:
<section class="parallax">
<div class="parallax-inner">
<h2>Space</h2>
</div>
On the css then I put a background and some padding. But here's the problem: I created an h1:
<section class="parallaxtop">
<div class="parallax-inner-2">
<h1>Space</h1>
</div>
And I set the background bbut it doesn't appear!! I'm 100% sure that i put the right file and the right directory! And I did the same with the h2 div! What should i do?
.parallaxtop{
background: url("img/pattern.jpg");
}
there's a typo on .parallaxtop
you used color('') instead of url('')
should be:
.parallaxtop{
background: url("img/money.jpg");
}
Related
To create a background image in a div, you can easily write
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>
I would like to do this without a seperate style sheet. It might look something like
<div class="bgimg" background-image="url('../images/divbg.png')">
div with background
</div>
However, when I try this, it doesn't work. Is setting a background image in a div without separate CSS possible?
You need to set background-image in style tag. Also you have to set width & height for properly working.
<div class="bgimg" style="background-image:url(https://dummyimage.com/200x200/000/fff&text=Background+Image); width: 200px; height: 200px;"></div>
You should use the style element:
<div class="bgimg" style="background-image: url('../images/divbg.png')"></div>
There are two methods of doing this and you can use other of the two:
<div class="bgimg" style="background-image:url('../images/divbg.png');">
</div>
or you can use
<div class="bgimg" style="background:url('../images/divbg.png');">
</div>
To see the background don't forget to put in content to your div.
Run the below code to see it work:
.bgimg{height:328px; width:328px;}
<div class="bgimg" style="background-image:url('https://www.gravatar.com/avatar/89aa49add7f84c840f2d011857353431?s=328&d=identicon&r=PG&f=1);">
</div>
<br/ ><br/ ><br/ ><br/ >
<div class="bgimg" style="background:url('https://www.gravatar.com/avatar/89aa49add7f84c840f2d011857353431?s=328&d=identicon&r=PG&f=1');">
</div>
Use inline style using style attribute inside of your div element. Like this:
<div style="background-image: url('../images/divbg.png')"></div>
Note that you may have to remove apostrophes in the url() to make it work in Chrome.
You can set the background image with inline CSS and eliminate the need of a seperate css block or file:
<div style="background-image: url('../images/divbg.png')"></div>
If you are using jQuery you can do this on document.ready:
Still.. using CSS is recomended
Snippet:
$(document).ready(function() {
$('.bgimg[background-image]').each(function() {
$(this).css('background-image', $(this).attr('background-image'));
})
})
.bgimg {
min-height: 100px;
background-repeat:no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?0')">
div with background
</div>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?1')">
div with background
</div>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?2')">
div with background
</div>
I'm trying to create a website with a header that stretches across the top, and i want this header to have a background image... But, I can't work out how to do it... I've tried plenty of techniques I have found on stack overflow but haven't been able to get any of them to work.
Below is my code for the header section:
<div class="jumbotron text-center" style="color:#ffffff">
<h1>HEADING</h1>
<p>SUBHEADING</p>
</div>
Any help on how I can give this div a background image will be much appreciated!
(also sorry in advance, I'm an absolute HTML noob)
Setting a background on div is easy, do it like
Style
<style type="text/css">
.bgimg {
background-image: url('../images/bg.png');
}
</style>
Html
<div class="jumbotron text-center bgimg" style="color:#ffffff">
<h1>HEADING</h1>
<p>SUBHEADING</p>
</div>
Give .bgimg css class to div and you can see the background
I have this part on my index.html page
<!-- Top of the Page -->
<div id="home" class="container header">
<div class="row">
<div class="image-header margin-0">
<div class="overlay"></div>
<div class="headertext">
<h1>EXAMPLE</h1>
</div>
</div>
</div>
</div>
I am trying to target the word 'EXAMPLE' in my main.css, but I am having troubles with it. Whatever I try, it seems to target the parent divs or not target it at all.
I have tried targeting:
.headertext .h1
.headertext h1
p h1
I basically tried every combination, but I can't achieve the effect I desire.
My goal is to have an image, then a black overlay with opacity on top of the image and then some text in the center of the page.
Thanks everyone!
edit: removed p tags around h1
edit2: I actually figured it out. There was margin-top added automatically to the h1. I am guessing it's a default in bootstrap? I set margin-top to 0 and it's working fine now. Thanks!
You can't use <h1> inside of <p> as this is an invalid HTML. Although you can use an anchor or a span with a bigger font size.
Please try something like below.
.headertext h1 {
color: green;
}
<div id="home" class="container header">
<div class="row">
<div class="image-header margin-0">
<div class="overlay"></div>
<div class="headertext">
<h1>EXAMPLE</h1>
</div>
</div>
</div>
</div>
I actually figured it out. There was margin-top added automatically to the h1. I am guessing it's a default in bootstrap? I set margin-top to 0 and it's working fine now. Thanks!
This is a live demo: http://baogiadientu.com/demo/fridgevan/
And the result that I want: http://baogiadientu.com/demo/fridgevan/images/demo.png
I want to add a background with an infinite width to two elements (.top-bar and .nav). I have tried to do the same with .bgwhite's background but a scroll bar is appearing, which is not what I want. Does anyone have any advice on how to achieve this without a scroll bar?
Here is my HTML structure:
<div class="container">
<header class="clearfix">
<div class="bgwhite"></div>
<div class="logo">
<img alt="logo" src="images/logo.png">
</div> <!-- end .logo -->
<div class="beside-logo">
<div class="white-spce"></div>
<div class="top-bar">
</div> <!-- end .top-bar -->
<div class="nav">
</div> <!-- end .nav -->
</div> <!-- end .beside-logo -->
</header>
</div> <!-- end .container -->
I'm sure we would have to see the CSS in order to answer to this, but I suppose you have a .css file linked to that .html document, am I right?
In this case, just set the background image to body and mess around with the properties available for the background attribute.
body {
background: url(images/yourbg.jpg) fixed center repeat-x;
}
And in case you mean to set a white background with a bit of transparency to it, so that the site's background is still coming up from back there, try this:
.nav {
background: rgba(255,255,255,0.5);
}
Hope this helps, it's what I understood from the question.
I am playing with the styles on the website here: http://www.grabapper.com
I am trying to include background-color #2ba6cb on the hero unit. When I include:
<div class="row" style ='background-color: #2ba6cb;'>
The color doesn't go all the way to the edge of the page. How do I get the background color to go to the edge of the page?
Bootstrap default "contextual backgrounds" helper classes to change the background color:
.bg-primary
.bg-default
.bg-info
.bg-warning
.bg-danger
If you need set custom background color then, you can write your own custom classes in style.css( a custom css file)
example below
.bg-pink
{
background-color: #CE6F9E;
}
Move your row before <div class="container marketing"> and wrap it with a new container, because current container width is 1170px (not 100%):
<div class='hero'>
<div class="row">
...
</div>
</div>
CSS:
.hero {
background-color: #2ba6cb;
padding: 0 90px;
}
Just add a div around the container so it looks like:
<div style="background: red;">
<div class="container marketing">
<h2 style="padding-top: 60px;"></h2>
</div>
</div>