I have no clue what I am doing wrong with it. Everything is the same as what I have searched online. I have my normal jumbotron setup
<div class = "jumbotron">
<div class = "container">
</div>
</div>
and then in my css I use the tag
.jumbotron {
background-image: url(insertimagehere)
}
Can anyone see what I am doing wrong? Any help is appreciated!
Related
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'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 want to add two images in a single row on my home page made using html css and bootstrap what should be the size of those images(in pixels). Please tell me how can I make those images responsive? Any help will be appreciated. Thanks.
Make 2 dividers in your HTML like:
<div class="row">
<div class="col-md-6 myfirstimageclass"></div>
<div class="col-md-6 mysecondimageclass"></div>
</div>
The class col-md-6 is a Bootstrap class, the other class myfirstimageclass is a self made class, place the images as background in your CSS and you are finished:
.myfirstimageclass{
background-image:url(yourfirstimageurl);
background-size:cover;
height:300px;
}
.mysecondimageclass{
background-image:url(yoursecondimageurl);
background-size:cover;
height:300px;
}
You should choose a reasonable size so they aren't huge is filesize.
Then use bootstrap's img-responsive class to make them response.
Here's a link to the bootstrap documentation for img-responsive.
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!
I am having an issue with overlapping elements which I don't want. I'm sure it's all right but I can't work out why. This is a one page lay out with a fixed navigation on top. There are five sections home, services, gallery, contact, about. The service section is behind the about section when zooming. I wrote this example to illustrate my point. CSS, HTML, Bootstrap 3
//css
section {
position:relative;
padding:80px 0;
min-height:100%;
}
<section id ="services">
<div class = "container">
<div class = "row">
<div class="col-md-4">
some text and an icon etc...
</div>
<div class="col-md-4">
some text and an icon etc...
</div>
<div class="col-md-4">
some text and an icon etc...
</div>
</div>
</div>
</section>
<section id = "about">
<div class = "container">
<div class = "row">
When zoom in they stack but only show the first block in the service section the other two blocks are hidden behind the about section.
use :
*{
box-sizing: border-box;
}
it will solve .