I'm doing a Django project and I'm using the blog example from Bootstrap 5
I'm trying to embed an image into the first div. So it goes from this:
To this:
It's photoshopped.
How can I do that?
This is the div I'm trying to edit:
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 text-white fst-italic">We are opening our 4th location in March 2023</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and
efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0">Continue reading...</p>
</div>
</div>
The full example code can be downloaded from here.
Add a background property to the div:
<div style="background-image: URL('www.server.address/image.jpg');">
</div>
You will want the background property, you can attach a URL to it.
You may then want to Apply a filter to a background image
.headerObject {
height: 100px;
width: 300px;
background: url("https://cataas.com/cat");
background-size: cover;
}
<div class="headerObject">
Hello World
</div>
Related
I want to make a user card for the front-end im currently making and our/my approach for that was to resize the user image based on the width given, but we noticed especially on large screens the Image gets really big while the text remains small.
I created a small mock-up in adobe xd how I image it to look like :
User-Card Mockup
What is common approach to this?
The only way I could imagine is to make a media query every 100 or 200px and that would be annoying as you can imagine.
This can't be that annoying right?
We're using Angular with SCSS and also used a lot of Bootstrap 4 but kinda want to get away from bootstrap.
This is the HTMl of our component before I tried changing it :
<div class="mb-3" style="cursor: pointer;" (click)="openModal(user)">
<div class="row" >
<div class="col-lg-6 col-sm-6">
<img class="rounded" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
</div>
<div class="col-lg-6 col-sm-6 ml-n4 w-100">
<h3 [title]="user.name" class="text mb-0 border-bottom w-100 trunc">{{ user.name }}</h3>
<div>
<h4 class="text mb-0">{{ user.jobTitle }}</h4>
<h6 class="text mb-0">{{ user.hiredAt | date }}</h6>
<span class ="badge badge-primary">{{ user.department }}</span>
</div>
</div>
</div>
I hope this question isn't that stupid.
If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto
`
<img class="rounded responsive" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
</div>`
.responsive { width: 100%; height: auto; }
I have in my application a bootstrap card with a header, which looks like this:
As a code I used:
<div class="card">
<div class="card-header card-header-warning">
<h4 class="card-title">Blah blah</h4>
</div>
<div class="card-body">
</div>
</div>
But I don't want to use the in bootstrap defined colors (like primary, warning, success...), I want to use other colors like cyan or bordeaux (in GRB fromat or HEX, just not bootstrap).
How may I implement this?
I tried with defining an ID in the div like this:
<div class="card-header card-header-warning" id="card-header-color">
And in my css I had:
#card-header-color {
background-color: cyan;
}
But nothing has changed.
Then I deleted the "card-header-warning" part, but then the styling was also gone (look at the picture), so I just need a way to change the color, without having to style the header again.
I'd be really happy, if you could help me.
Make sure that your css file attached after bootstrap css file on the head tag
Try like this .card > .card-header-warning{background: cyan}
still issue there ?
Make sure that your piece of code is at the end of the style sheet
still issue there ?
Try the forced override .card-header-warning{background: cyan!important}
You can try to only override the color by using the !important rule.
you code will become:
#card-header-color {
background-color: cyan !important;
}
and
<div class="card-header card-header-warning" id="card-header-color">
You can use the !important property to your CSS (normally it should work).
#card-header-color {
background-color: cyan !important;
}
First of all, you shouldn't use IDs to style components. It's not a good practice.
Also, you can just color the text inside it to match your needs with text-white or whatever. So, your html would look like this:
<div class="card">
<div class="card-header card-header-color">
<h4 class="card-title text-white">Blah blah</h4>
</div>
<div class="card-body">
</div>
</div>
And your css:
.card-header-color {
background-color: cyan;
}
Looking at the bootstrap documentation, you can also see how to implement the cards the way they are intended to, here is a example of a blue info card.
<div class="card text-white bg-info">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
I'm trying to put a background image just for this part of my web page, I put my image as an id (fruit) but it isn't appearing. Here is my code:
<div class="p-1 text-center bg-light" id="fruit">
<div class="col-md-6 mx-auto my-5">
<h1 class="display-4 font-weight-normal">TrendyEats</h1>
<p class="lead font-weight-normal">The Latest Food Trends</p>
<a class="btn btn-outline-secondary" href="#">Login</a>
<p class="small pt-4">blablabla </p>
</div>
</div>
and the css for the fruit id is:
#fruit {
background-image: url('/Pictures/fruits.jpg');
alt:"woops";
}
The "alt" also doesn't appear.
Any help is appreciated, thanks!
Edit: Fixed, it appears I had to write "Pictures/fruits.jpg" instead of "/Pictures/fruits.jpg"
You may want to check that your relative link is correct. If I replace that with an external link the background shows up just fine.
You want to add the alt within an img tag in HTML- in your case you don't have this. If you are adding a background image via CSS, you may want to add a solid color as an alternative to display as a backup if your link were to fail.
try to add
#friut {
background-image: url("./Pictures/fruits.jpg");
background-color: #000;
}
also check whether you have correctly linked the css file to the html page.
Please check image url it's working, [I am replaced it with content after #fruit] You can not place alt inside css you need to add on html image because it's html attribute, where you can add or set it with JavaScript.
#fruit {
background-image: url('https://www.w3schools.com/w3css/img_lights.jpg');
}
#fruit:after {
content: " (woops)";
}
<div class="p-1 text-center bg-light" id="fruit">
<div class="col-md-6 mx-auto my-5">
<h1 class="display-4 font-weight-normal">TrendyEats</h1>
<p class="lead font-weight-normal">The Latest Food Trends</p>
<a class="btn btn-outline-secondary" href="#">Login</a>
<p class="small pt-4">blablabla </p>
</div>
</div>
Hey so I am trying to inject a background image to my Django template however for some reason I do not know why it not loading I tried inline styling on the html(** ) tag but nothing
I the tried to to make an external css file but still not working can you please show me what I can be possibly doing wrong here.
** Below is the code to my html tag that I want to put the background image to**
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-6 ftco-animate">
<h2 class="subheading">Leave the house cleaning chores to us</h2>
<h1 class="mb-4">Let us do the dirty work, so you don't have to.</h1>
<p>Learn more <span class="ion-ios-arrow-forward"></span></p>
</div>
</div>
</div>
</div>
And here below is the external css file that I made to test if it would work having an external stylesheet
.hero-wrap js-fullheight{
background-image: url('static/images/bg_1.jpg');
}
If possible can you teach me how I can make inline background-image on the html tags using Django templates
try this:
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5" style="background-image: url({% static '/images/bg_1.jpg' %});">
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;
}