I'm trying to get my head round Bootstrap background images. Can anyone help on the right syntax for displaying a background image when the file is local. Specifically I've got two alternative lines in my page html
<body class ="bg-image" style="background-image:
url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');height:100vh;">
<body class ="bg-image" style="background-image:
url('/wwwroot/Images/gymEquipment.jpg');height:100vh;">
The first one works and the second local one doesn't. Any corrections greatly appreciated.
Thanks,
Nick
Full page background image
we can easily make this background image to cover the full available space and make it a full-page background image.
Just replace height: 400px; with height: 100vh;
vh stands for viewport height.
height: 100vh; means 100% of available height.
<!-- Background image -->
<div
class="bg-image"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp');
height: 100vh;
"
></div>
<!-- Background image -->
Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.
For More Information: https://mdbootstrap.com/docs/standard/content-styles/background-image/
Related
I keep trying to use different images as a background but I am unlucky so far in figuring out if it is an issue with the photo file size or is there something wrong with the pictures i use? Asking since i tried with one image and the background image shows and works but any other picture that I want to use will not show up or work properly even though I have looked over my code multiple times and it is correct. Here is my current code
<!DOCTYPE html>
<html>
<head>
<title>Winston Berz</title>
<style>
body {
background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
min-height: 100%;
background-size: 100%;
}
</style>
</head>
<body>
<div id="Navbar">
<nav>
Main
About Me
Contact
Photos
</nav>
</div>
<div id="Main Title">
<header>
<h1>Winston Berz</h1>
</header>
</body>
</html>
Want to also note that I also was using a separate document for css and got the same results so this time I resorted to internal css.
Help! Please and thank you I am still relatively new to coding.
you could try to clear your browser cache (here is how) maybe the browser is storing previous images.
Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.
inside the <body> tag you can add
<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>
and inside your css style sheet you add this
.background-images-wrapper{
height: 100%;
width: 100%:
object-fit: cover;
z-index: -1;
z-index: -1 is to make sure that your images will always stay behind the rest of your elements
I have images that are dynamically pulled and cannot be certain of the image size or ratio of the image.
Using bootstrap4 (and wordpress) i'm trying to scale the image so that it fills the width and height of the div, and if possible maintain the aspect ratio (its ok if the image gets portions cutoff).
My image is currently breaking the height of the div and the image will size outside of the div.
.blog-home {
max-width: 570px;
max-height: 225px;
}
.blog-home img {
object-fit: cover;
max-height: 210px;
}
img {
max-width: 100%;
height: auto;
}
<div class="row article">
<div class="col-md-6 blog-home">
<picture width="778" height="312" class="attachment-large size-large wp-post-image">
<source type="image/webp" srcset="..." sizes="(max-width: 778px) 100vw, 778px">
<img src="..." sizes="(max-width: 778px) 100vw, 778px">
</picture>
</div>
<div class="col-md-6">
....
</div>
</div>
My tags are dynamically replaced with tags. I can't sort out how to fix this without breaking the responsive-ness of the layout.
Then I would suggest that you use background-size: cover. Here is the definition according to https://www.w3schools.com/cssref/css3_pr_background-size.asp.
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
Use Cover to resize the background image to cover the entire container.
Here is an example link:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
The best solution would be to cut or crop the images somewhere in the wordpress, here is a good read on why and how it can be achieved. In case your images are already in the Media Library - use Regenerate Thumbnails plugin to fix all of them in one click.
I think there are a lot of styles involved in the case, so it won't be so easy to get which exact part of it breaks the output without inspecting the full source, however in the worst case you could add .blog-home {overflow:hidden} to cut all what goes outside the div.
I am attempting to set an image as the background and have it auto-resize and auto-center when the window changes size. Right now I have the auto-resize and auto-center working perfect, but I have no clue how to make it my background image. I had to replace all opening and closing symbols with the PLUS (+) symbol. My current code is as follows:
<div style="text-align: center;">
<img src="amazing.jpg" style="max-width: 100%; height: auto;" alt="Epoxy Flooring of NY" />
</div>
Any suggestions to make it the background instead of just a picture taking up the whole screen? I need the words on top of it, not under it.
Welcome to the stackoverflow-community :)
Just use the background-image-property instead of an <img>-tag.
<div style="background-image:url('amazing.jpg')">
<!-- your text here -->
</div>
For more information See here and here.
Note:
If you use background-image instead of <img> you will not see anything unless you give the <div> a height, by either filling it with text or/and setting it's height of, for example, 100px.
There is two ways to do it one using the css background img property and the other using the HTML img tag.
https://jsfiddle.net/pdhgLap8/
Basically what you need to add to use background images is
background-image: url("https://i.imgur.com/SebQr4d.jpg");
background-size: contain;
background-repeat: no-repeat;
This will set the background image
make it so it is only as large as the div it is in
and make it so it doesn't repeat to fill the div
I'm attempting to place images inside grid tiles in an Angular-Material based app I'm working on. My problem is that these images do not "fit" within their tiles. Below is an example. My image is large (2832x4256) and takes over the entire container rather than scaling to fit within its tile. How could I get images to scale to fit within their respective tiles in the grid?
<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1">
<md-grid-tile class="green">
<img src="resources/images/food-beer.jpg" alt="beer">
<md-grid-tile-footer>
<h3>first tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="blue">
<md-grid-tile-footer>
<h3>second tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="purple">
<md-grid-tile-footer>
<h3>third tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
Below is the result. What I'm aiming for instead is for the image to occupy the same amount of space as each of the blue and purple tiles.
If you want them to occupy the entire rectangle, I believe using the "layout-fill" attribute will also achieve that.
<img src="resources/images/food-beer.jpg" alt="beer" layout-fill>
It's been a year and the syntax has changed dramatically, but the problem remains. Here's how I solved this issue in an Angular 5/Angular Material 5 project.
For 2 columns and pictures that were 4600px x 3400px, I did the following:
In my css:
.tile-image {
width:100%;
height: auto;
}
In my html template:
<mat-grid-list cols="2" rowHeight="6:4">
<mat-grid-tile>
<img class="tile-image" src="../demo/tilePic1.jpg">
</mat-grid-tile>
You could either do this with targeting the image in CSS or by setting it as a background image.
Here is the CSS method but the downside to this is as the aspect ratio is based on the images width, at some breakpoints the image may not fill the tiles height.
.green img {
max-width: 100%;
height: auto;
}
So going with a background image maybe a little better but this method isn't fully cross browser supported.
.green {
background-image: url('folder/your-image.png');
background-size: cover;
}
All the answers are nice. But you can also try
<img src="resources/images/food-beer.jpg" style="object-fit: cover; height: inherit; width: inherit;">
Nothing seems to be working for me. But what I would like to do is make the header image fit to the size I'd like, which is the container. Heres the actual page link: this.
And heres the jsFiddle here: http://jsfiddle.net/Zorabelle/f7DRh/.
I think this is what I have to fix but I just don't know.
/*HEADER IMAGE DETAILS - HEADER MUST BE 921PX WIDE*/
.header {
background-image: url(http://media.tumblr.com/aceb30d864925524ee215c0d6f88e1bc/tumblr_inline_mu0br62w4R1s7znag.gif);
background-repeat:no-repeat;
height:200px; /*CHANGE TO THE HEIGHT OF YOUR BANNER*/
}
I want the 'Define the Term' header to fill up that whole space. Help?
Here's a working JSFiddle example: http://jsfiddle.net/f7DRh/2/
You can set the image size to container by specifying:
background-size:100% 100%;
That way it will always keep it within container's width and height.
Reference:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can also use the traditional replacing your div
<div class="container">
<div class="header">
</div>
becomes
<div class="upcon">
<img src="http://yourimage.com" style="width:100%" />
</div>
By the way, with this method the browser tries to render the image correctly if the user has a resoltion smaller than what your are asking (1050px). It won't crop it.