Bootstrap background image in container doesnt work - html

I am trying to add a background image for my website, using bootstrap-4 and external css (internal doesn't work for me as well).
I am trying to add image which will be behind all rows which are in a
If i try to use it for a rows inside the container it works, but i wanna the background behind all rows, not just behind one.
Could you help me with that please?
.background {
background-image: url('images/podklad.png') !important;
height: 100%;
}
#top_part {
/*background-color: #ff9900 !important;*/
}
<div class="container-fluid background" >
<div class="row" id='top_part'>
<div class="col-6" >
<div class="d-flex text-center justify-content-center align-items-baseline">
<h1>bla bla<br/>bla bla</h1>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-primary"><h4></h4></button>
</div>
</div>
<div class="col-6">
<img class="img-fluid" src="images/krabicka.png" alt="">
</div>
</div>
<div class="row" id='top_part'>
<div class="col-12 text-center">
<h2>bla bla</h2>
</div>
</div>
<div class="row" id='top_part'>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/lock80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/gears80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-center" id='lock_gear_heart'>
<img src="images/heart80px.png" alt="">
</div>
<div class="d-flex justify-content-center" id='text_lock'>
<h5>bla bla</h5>
</div>
</div>
</div>
</div>

It seems that your code worked for me.
Here's a JSFiddle I created with example pictures. You can just replace my example images with yours. Your code correctly places the image behind the container with all of the rows.
If you want the image to be behind literally everything on the page, then change your CSS to look like this:
body {
background-image: url('images/podklad.png') !important;
background-size: cover; /* Resizes the image to cover the entire container */
}
If no image is showing up, then make sure the image paths are correct.

Related

Stop background collapsing with context

I have a div which has a background image and some text and I want the content of div to stop overlapping from a part (ribbon part) of the backgrounf image. Please check images so that it's clear to you what I am willing to do.
This is how it should appear on all screens (except phones)
This is not how I want it to be. I want the text to stay away from ribbon for all screen sizes
Html:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span>
overview
</h3>
</div>
</div>
</div>
css:
#overview1 {
background-image: url("ribbon.jpg");
background-position: 10% 100%;
background-size: cover;
background-repeat: no-repeat;
color: white;
}
I would do it a bit differently if I were you. Instead of setting the background-image on the #overview-1, I would make two columns (put the image inside the left column and put the text inside the right column).
It would be easier to help you if you edit your question and add more HTML & CSS. Also, having a similar image (at least) would be very helpful to test the snippet.
Something like this:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<div class="row">
<div class="col-6">
<!-- Image here -->
</div>
<div class="col-6">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span> overview
</h3>
</div>
</div>
</div>
</div>
</div>

Make bootstrap col overflow container

So I have this code
<nav class="hhc-navbar-noshadow navMasterPageAgency">
<div class="container container-nav-master-page-agency ">
<div class="row w-100 align-items-center" >
<div class="row col-12">
<div class="col-1" style="min-width:120px;max-width:120px;width:120px"></div>
<div class="col-8 d-flex align-items-center nav-master-page-agency-links">
<a class="item-menu-famille-metier f1" href="#" >Link1</a>
<a class="item-menu-famille-metier f2" href="#" >Link2</a>
<a class="item-menu-famille-metier f3" href="#" >Link3</a>
</div>
</div>
<div class="row col-lg-1 col-xl-2 pageNameTitle">
<div class="logo-ma-team accueil" >
<img src="unsplash.it/450/150" />
</div>
</div>
</div>
</div>
</nav>
.navMasterPageAgency {
background: #F6F8FF 0% 0% no-repeat padding-box;
width: 100% !important;
height: 130px
}
.nav-master-page-agency-links {
background: #FFF 0% 0% no-repeat padding-box !important;
height: 40px;
}
The nav-master-page-agency-links should be on the top and should have #FFF background color
and the reset should be under it with another color.
The problem is the nav-master-page-agency-links is in a container and I can't make the #FFF for 100% width of the page and a the same it's position should be relative to the logo-ma-team accueil class
well I change to container-fluid it does help but the content of the reset of the page will not be aligned with the logo, because the reset of the page is in a container not container-fluid
so any idea or help? thank you
Based on my understanding of the question is that you are trying to align the content on the left side and make the .nav-master-page-agency-links full width of the web page.
This snippet should do the job:
Explanation:
I have just wrapped the containers inside a <div class="bg-colorName"></div> to make it 100% of the outer container which is .container-nav-master-page-agency. This will result in making the color expand the whole page and then shrink the content inside the .container.
.nav-master-page-agency-links {
height: 40px;
}
.bg-violet {
background: #F6F8FF 0% 0% no-repeat padding-box;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="hhc-navbar-noshadow navMasterPageAgency">
<div class="container-nav-master-page-agency">
<div class="bg-white">
<div class="container">
<div class="row">
<div class="col-8 d-flex justify-space-between flex-row align-items-center nav-master-page-agency-links">
<a class="item-menu-famille-metier f1" href="#">Link1</a>
<a class="item-menu-famille-metier f2 ml-3" href="#">Link2</a>
<a class="item-menu-famille-metier f3 ml-3" href="#">Link3</a>
</div>
</div>
</div>
</div>
<div class="bg-violet py-5">
<div class="container">
<div class="row col-lg-1 col-xl-2 pageNameTitle">
<div class="logo-ma-team">
<img class="img-fluid" src="https://icons-for-free.com/download-icon-placeholder-1320568685473343206_128.ico" />
</div>
</div>
</div>
</div>
</div>
</nav>

Center logo + menu bar?

I am using this theme: https://themeforest.net/item/memento-multipurpose-funeral-services-html-template/23890802
Can somebody explain me where I start with centering the logo + the menubar?
<section class="page_toplogo ls s-pt-25 s-pb-20 s-py-md-30">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="d-md-flex justify-content-md-end align-items-md-center">
<div class="mr-auto">
<div class="d-none d-md-flex justify-content-center justify-content-md-start">
<a href="./" class="logo">
<img src="images/logo.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
thanks in advance
If all you want to do is to center the logo your can remove the mr-auto class from the html or this css
.page_toplogo .mr-auto {
margin-right: 0 !important;
}
If you also want to remove those items to the right of the logo, either remove the html or hide them with display: none and replace justify-content-center with justify-content-start to the logo wrapper.

how to change div width based on content

I am trying to figure out how to display my divs on a single row and change their width.
If the image div doesn't exist, the description div should have width: 100% (or in my case col-12).
How can I change the width?
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div class="col-9">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Use ngClass directive and set classes conditionally.
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div [ngClass]="(update.imageUrl)?'col-9':'col-12'">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Here is the reference.

Bootstrap 4 Grid Row - Images Not Aligning Vertically

I have a row of images that for some reason aren't aligning vertically. If I use all the same images, it looks fine, but if I replace with a different image with slightly different dimensions it doesn't work. Here's an example below:
Here's my HTML code..note I am using some custom CSS for an overlay, not sure if that could be causing a problem
<div className="container">
<div className="row">
<div className="col-xl-12 mx-auto mb-3">
<h2 className="abouthead">Portfolio</h2>
</div>
</div>
<div className="row">
<div className="col-lg-4 col-md-12 mb-4">
<div
className="view overlay hm-black-strong"
data-toggle="modal"
data-target="#modal1"
>
<img
src="http://localhost:3002/images/dealmazing.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">Deals Website</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-12 mb-4">
<div
className="view overlay hm-black-strong"
data-toggle="modal"
data-target="#modal2"
>
<img
src="http://localhost:3002/images/crypto-portal.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">
Cryptocurrency Portal
</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-12 mb-4">
<div className="view overlay hm-black-strong">
<img
src="http://localhost:3002/images/dealmazing.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">Deals Website</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
</div>
//CSS
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
#import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css);
.hm-gradient {
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
color: #2E2E2E;
}
Have you tried specifying a height for your image? And then apply Object-Fit CSS property.
img {
object-fit: cover;
width: 400px;
height: 400px;
}