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
Related
I am trying to build a website where I occurred this error. Where I am trying to position an h1 element,
but there is something coming between my way. Here This is the image the blue part is highlighted and coming in my way. I tried using inspect but it tells its a div called (our-team).but as per my CSS the div has height as much as the background image CSS code:-.
.our-team{
height: 500px;
}
html code:-
<div class="our-team">
<img class="background-team"
src="https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?
auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" srcset="">
<h1 class="heading-team">Our Team</h1>
<div class="team-members">
<h1 class="member-name">Lara</h1>
</div>
And when I inspect on our team it shows an image(This is the inspected image).
Thank you,
in your example, you didn't close the first div.our-team tag
Maybe that's the reason?
BTW, if I understood you correctly, maybe this one help you?
https://jsfiddle.net/Madebyspeedster/fq0emnk1/14/
Maybe try and move the margin or padding to a -25px
I have been looking for an answer for this for a few days now and can not seem to find a solution. Below is the example I am trying to implement, however no image is displayed. The aim is to have a responsive image that covers the entire page.
<div class="col-md-12 img-responsive"
style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />);">
as far as I am aware this should work, I have resource mapping implemented and is working, I can tell this by navigating to the url and the image is displayed.
When placing this tag into the body element with the background attribute it displays the image but is not responsive and cuts the image as it pleases. I have tried styling this with bootstrap and using my own css, but anything I do makes no change/removes the image completely.
This url does also work with the <img> tag except then I can not overlay other elements with ease.
Ultimately my question is how can I get the div element to accept this url as a background image using pure css?
Any suggestions/prior experience would be welcomed.
HTML code
<body background="">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 header_bar">
<div class="col-md-6 text-left">
Home
</div>
<div class="col-md-6 text-right">
log in
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 img-responsive" style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />);">
</div>
</div>
</div>
Write a class to the div and write the css. set width and height for responsiveness. Remove the bootstrap classes "img-responsive".
i.e
HTML :
<div class="yourclassname">
CSS:
.yourclassname
{
background-image:<c:url value="/resources/img/abstract-ice.jpeg" />
width: 100%;
height: auto;
}
Thanks to #Wisely for pointing me in the right direction,
This was solved by removing the bootstrap classes from the div that I was trying to add the background image to.
The HTML
<div class=" yourClassName" style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />)"></div>
The CSS
.yourClassName {
height:100px;
width:100px;
background-size: cover;
background-repeat: no-repeat;
}
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!
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");
}
My image div seems to be taking up the entire top section of the browser, I am not sure what I did wrong, but in order to make the text align within the image, I will have to add top:250px, that doesn't seem right to me. Here is my code: http://jsfiddle.net/Swathi56/zzbwkoLj/1/
I have attached the image for your reference.
<div>
<div class="hero-image-download col-xs-12">
<div class="overlay"></div>
<div class="hero-text-download text-center">
<h1>aspenONE Download Center</h1>
<h2> Download your UPGRADE now!</h2>
<p>Simply select software suite and you need to start using the latest version.
It’s fast and easy</p>
</div>
</div>
<div class="engineering-section">
<div class="engineering-section-title title-text">Engineering</div>
</div>
</div><!--end div-->
Remove top: 250px; from your text and set their parent DIV's (.hero-text-download) position to absolute and align it to the bottom of it's parent DIV (bottom: 0;).
.hero-image-download .hero-text-download {
position:absolute;
margin:auto;
bottom: 0;
}
http://jsfiddle.net/zzbwkoLj/2/
Remove
background-size:cover
height:500px
from the .hero-image-download class styling.
After this you do not need to add top:250px in the text containers.
I hope this will help