I am making a small eastern project. The website is here: My Website.
I need to make some boxes that contain a png picture on top of the background-picture like this:
I set the picture on the col, but I guess I need to make it as a background in CSS, since I cannot build something on top of an img tag:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<center><img src="https://mimsi.dk/images/logo.jpg" class="img-fluid" alt="Eastern"></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="https://mimsi.dk/images/eeg.jpg" alt="Eastern game" class="background">
</div>
</div class="row">
<div class="col-md-12" style="border: 1px solid red;">
<h1 style="text-align: center;">FOOTER</h1>
</div>
</div>
</div>
Instead of using the img src tag, I set this in my HTML and CSS:
<div class="col-md-12 bg">
.bg {
background-image: url("https://mimsi.dk/images/eeg.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
But nothing has worked out yet. How can I set the background-image, so it is not going to the header logo or footer, so I can build my 8 boxes on top?
First there is a mistake in your HTML in this line </div class="row"> i think you got that you can't put class in closing div
Solution
I created a fiddle
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have the following HTML(Bootstrap) (really broken down, should be enough though):
<div class="container-fluid" id="hero">
<div class="container container-padding">
<div class="row">
<div class="col" align="center">
</div>
</div>
</div>
</div>
<div class="container-fluid" id="spotlight">
<div class="container container-padding">
<div class="row">
<div class="col" align="center">
<img src="img/spotlight.png" />
</div>
</div>
</div>
</div>
And I am using a background image on each "container-fluid" element.
Now I need the first background Image overlap the second "container-fluid".
However when I use negative margins on both of the e.g (margin-top:-50px or margin-bottom:-50px - it appears that always the second overlaps the first.
I tried z-index which wouldn't work for background-images.
I can't really include the second background image as an actual image because I want to add content to that element.
How do I get the first div overlap the second when using negative margins?
Would appreciate any help, thanks!
Just use the position other than static and control them via z-index:
.container-fluid {
position: relative;
min-height: 50px;
}
#hero {
background: url('https://via.placeholder.com/350x150/ff0000') no-repeat;
background-size: cover;
z-index: 10;
top: 20px;
}
#spotlight {
background: url('https://via.placeholder.com/250x250/00ff00') no-repeat;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid" id="hero">
<div class="container container-padding">
<div class="row">
<div class="col" align="center">
</div>
</div>
</div>
</div>
<div class="container-fluid" id="spotlight">
<div class="container container-padding">
<div class="row">
<div class="col" align="center">
</div>
</div>
</div>
</div>
Playground.
I'm new to coding and figured best way to learn is to get a gig, which I did. I've got some basic (like very basic) HTML & CSS knowledge, but bootstraps layout seemed to fit for what I'm trying to accomplish. Please keep in mind this is my very first project ever(!) when it comes to coding.
So here's the design I'm trying to replicate:
montere.it
I'm interested just in the main page, the actual tiles below the main image to be exact. I can't seem to find the best solution to position 2 tiles with background image, side by side(no gaps), with some h1 text and a small <p> above the background image in the tile, positioned centrally. There will be two more tiles below the initial two.
I SPENT A WEEK looking for similar solutions, but I'm exhausted and confused over all information digested. Can some one just point me in the right direction as to which features to use?
It seems even if I get to position both images, there are always gaps (right or left), there's no way to position the text exactly above the image centrally so it stays in one place when the display is resized and I don't want to cry about the rest.
I have a feeling it's a dumb question to ask, since none of the info I've found provide an exact solution to this question, so probably must be really easy to do and I just can't seem to grasp it.
I do apologize for taking up your time, but I just have no one else to ask.
Cheers!
Please check this out:
<div class="row">
<div class="col-sm-6 col-xs 12 col-img" style="background-color: red">
<h1>Image 1</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: orange">
<h1>Image 2</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: green">
<h1>Image 3</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: yellow">
<h1>Image 4</h1>
</div>
</div>
And add this to your CSS file:
.col-img h1 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
In case any one else runs into this problem, here's the fully working solution. I'm just not sure if it will disappear under gjfonte's link, so I want to be safe here:
Here's what was provided by #gjfonte:
<div class="row">
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-1">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-2">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-3">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-4">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
</div>
.content {
padding-top: 90px;
color: #fff
}
.content h1 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
.col-img .bg-img {
text-align: center;
margin: 0 -15px;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 250px;
}
.bg-img.img-1 {
background-image: url("http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}
.bg-img.img-2 {
background-image: url("http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}
.bg-img.img-3 {
background-image: url("http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}
.bg-img.img-4 {
background-image: url("http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}
Im trying to make these images to be displayed nicely inline and change its position/size depending on the screen size. This is my HTML code:
<div class="row tryRow white">
<div class="col-xs-4 portfolio-item leftPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/FMA.png" />
<p class="imgDescription">
Some text in here </p>
</div>
</div>
<div class="col-xs-4 portfolio-item centerPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/SFK.png" />
<p class="imgDescription">
Some text in here
</p>
</div>
</div>
<div class="col-xs-4 portfolio-item rightPic">
<div class="imgWrap">
<img class="img-responsive" src="~/img/CTG.png" />
<p class="imgDescription">
Some text in here </p>
</div>
</div>
</div>
These images display some text below them when they are hovered on.
This is CSS of one of the images:
.leftPic {
opacity:0.5;
border-radius:4px;
max-width: 33%;
width:auto;
}
As you can see I am trying to set the max width to 33% as I have 3 images per line, but the margins are not correct and to be honest there is a large problem with this.
Problem: To make them shrink, re-position depending on the browser while keeping the relatively sharp look.
i tried with this one:
.tryRow{ display: inline-block;}
Hmmm... I would approach it in a different way setting background-image instead of using html <img>. As you expect nice responsive behavior and your images are quite small have a look at this:
<div class="row">
<div class="col-md-4">
<div class="image image-1">Some text</div>
</div>
<div class="col-md-4">
<div class="image image-2">Some text</div>
</div>
<div class="col-md-4">
<div class="image image-3">Some text</div>
</div>
</div>
.image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
// height: control it with media queries
}
.image-1 {
background-image: url(path/to/image-1.jpg);
}
.image-2 {
background-image: url(path/to/image-2.jpg);
}
.image-3 {
background-image: url(path/to/image-3.jpg);
}
This approach will also give you more flexibility styling those boxes content.
Hi i was trying to create a website with the help of bootstrap 3.3
However I am stuck up with an issue that the image I am using is not responsive ie after a certain period it breaks.
This is the HTML code snippet:-
<div class="img-responsive" id="intro"> <!-- This is the container to display image-->
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 ">
<div class="box" style="margin-top:62px;">
<h1>Welcome to my world</h1>
<p>Welcome to web development program</p>
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>
</div>
The below is my css code snippet:-
#intro{
background: url('images/prog.jpg') fixed;
background-size: cover;
height:650px;
/*position: fixed;*/
}
#continue{
margin-left: 218px;
margin-top: 27px;
color: blue;
}
Please help me with this.I am not sure why the class img-responsive is not working.
img-responsive class for img tag only not for div.
as this is background image, it will not resize but yes, you can use different size image on specific break point
Thanks
I have a large image which I want to display using the entire width of the browser.
My code is:
<html><body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3> Welcome! </h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_image">
<img src="..."/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_content">....</div>
</div>
</div>
</div>
</body></html>
Bootstrap will automatically create margins/padding to make the image fit in the center of the page.
Is there a way to always allow the main image to fit the entire width of the browser, but keep the padding/margins for everything else on the page?
Your best bet is to assign the image as a background-image.
Here's a JSFiddle (https://jsfiddle.net/qoaqjgpz) with only the most important stuff from http://startbootstrap.com/template-overviews/full-width-pics/.
The .html:
<div class="image-bg-fixed-height">
</div>
The .css:
.image-bg-fixed-height {
background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
height: 450px;
}
.img-center {
margin: 0 auto;
}
Let me know if this is what you were searching for.