Site URL: http://theneonplanet.com.au/home-2-2/
Hi, I am working on this wordpress website. I use divi theme but I manually change things with css.
second section image
this is currently placed in the recent stories section.
The problem is that the post image is placed correctly but it is stretched inside the div and it looks very strange; the picture is not suppose to be this thin.
I want the image to be filled inside the div. which means it doen't need to be the same width of the div but it has to fill the space.
is there any code solution for this?
I tried object-fit, and min and max height. both didn't work..
There are multiple ways to make an image fill a div element using CSS. The easiest way would be to set the image as the background-image of the div and set the background-size to cover. You can also set the background-position to align the image.
div {
background-image: url("image.jpg");
background-size: cover;
background-position: center;
}
But in your case, you seem to be using a WordPress plug-in which inserts the image as an img tag inside the div and stretching the image to the size of the div. So we can use the object-fit CSS property on the img element to make the image fill the size of the img element.
Your code will look something like this.
#tesco-slider .et_pb_slide_image img {
object-fit: cover;
object-position: center;
}
Just as with the background-image approach, object-fit: cover will make your image fill the size of the img tag and object-position: center will align the image to the center.
use background-size: cover; attribute in your css for the background image
Related
I am working on a file html+css and I want to create background-image full-screen in HTML, and CSS I have set all properties for background image.
I want that background-image to fill all full-screen on devices and without scrolling on background-image so I try to do this:
* {
margin: 0;
padding: 0;
}
.background-image {
position: relative;
}
img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: fixed;
height: 100%;
width: 100%;
}
</style>
<div class="background-image">
</div>
I set the background-image position relative and img position fixed to make fixed without scrolling but it brings the background-image is streched also text? Any idea to fixed it ?
If you want a background image use create a container and with css add the background-image property to the container: url('the path of my img')
Some advice I can give you is:
img
Use IMG if you want people to print the page and you want the image to be included by default.
Use IMG if you want the browser to display an image in proportion to the size of the text.
Using IMG instead of background-image can drastically improve the performance of animations over a background.
css background-image
Use CSS background-image if the image is not part of the content.
Use CSS background-image when the image replaces the text
Use CSS background-image combined with CSS background-size:cover in order to stretch a background image to cover the entire container
Use CSS background-image if you want people to print the page and you do NOT want the image to be included by default.
use the object-fit property and object-position property.
Here you are not actually working on the background. The image is a element not a background. To make it a background you have to use URL of the image.
I want to put an image in background of the page and in of course it must be in a responsive way
this is the html code :
<div > title </div>
<img src="/assets/img/image1.jpeg" />
and the css :
img {
background-size: cover;
background-repeat: no-repeat;
}
Marshall's solution is better if you want the image to cover the whole viewing area.
Although it would not be in the background, using your <img/> tag it would be like this:
img {
width: 100%;
height: 100%;
}
<div> title </div>
<img src="https://picsum.photos/200/300" />
You want to set the background-image propierty of the body
body {
background-image: url("/assets/img/image1.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
A background image for the page would be best placed on the body element — here's a simple example which uses the background shorthand:
body {
background: url('../relative/path/to/img/goes/here') no-repeat #paleblue;
}
Here, we've provided the image, an instruction that the image should not repeat (it will by default), and a 'fall-back' background colour — this is useful if, for example, the image fails to load.
There's more that can be done, here. See MDN for more details. Pay special attention to background-size, as you'll likely want to use either cover or contain depending on the image, screen size, etc. The spec for both is straightforward, but you can very easily swap one for another and back again in your code and see the (often obvious) effect each has.
you can add background property to which container you want the background img is, if its body or any other container, also add to your img width and height property otherwise it will go beyond the container, you should add 100% if you want to cover the whole container.
background-position:center center
I have an app https://bootstrapp3.herokuapp.com/ the background image changes size when I add text. After using the inspect element function on the browser it seems that it is the font-size property that is affecting the background-size property, since when I uncheck the box related to font-size using inspect element, the background-size returns to the normal size. Why is the background size changing? compare the following two pages from the app:
Without text and font-size:
https://bootstrapp3.herokuapp.com/pages/page1
Background-size changing due to font-size:
https://bootstrapp3.herokuapp.com/pages/consulta
note that the only difference between the pages is the content in the view. Both pages inherit from the application layout.
css with the background size:
body {
background-image:image-url('gotita.png');
background-size: cover;
background-repeat: repeat;
background-position: 0 51px;
}
font-size element:
p {
font-family: 'Architects Daughter';
font-size: 20px;
}
You have set background property to cover. If you want to make it independent then apply the background to an empty div having the size you want to set. Then add text in another div having its position to absolute.
Now, changing the font size will not affect the background image.
It's because you are using:
background-size: cover;
on the body element. The height of the body is relative to all of the child elements. So, because of that, the background-image has to adapt to fill the height.
To make the background image the same on all the pages not depending on the content you could remove the background image from the body tag and make a div inside the body tag with position fixed, like:
background-image: url(/assets/gotita-7c57f01….png);
background-size: cover;
background-repeat: repeat;
background-position: 0 51px;
position: fixed;
Have a look at the background-size attribute you have assigned. This attribute can be described as follows:
contain : "Scales the image as large as possible without cropping or stretching the image."
cover : "Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains."
Source: MDN Web Docs
I have a design that I'm converting to be Bootstrap responsive but have run into a couple of problems.
How to make a non full width background image responsive
How to keep the main form content the correct distance away from the top of the image no matter what the viewport size.
Mock up image
Website
I'd be very grateful for any pointers
The following is one simple option, according to your mockup-Website.
Create a parent DIV that is center aligned on the page.
Apply a background image to this DIV and set its max-width to 100%.
Create another div that will sit on top of the parent DIV (and is relative to the parent DIV).
Give its top margin the required %.
It is recommended that you create these styles on media queries for responsive display.
There are a lot of StackOverflow topics the will help you through with the above steps.
HTH.
To fix problem 1: on the body you can use: background-size:contain;
First, for the background image:
div.someclass{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make your background image responsive, i.e. it will fit according to the size of the display the page is viewed on.
Second, to keep the main form content a proper margin from above on any device is to give the div you just created for the main content a relative margin on top:
div.someclass{
margin-top:5%;
}
change the above 5% according to your requirement.
This is my tumblr blog:
thestorywithnoending.tumblr.com
the code for the blog is a theme I got here:
http://themes.pouretrebelle.com/lycoris/?download
(just scroll down a bit, the whole code is there)
I want the background image to just be ONE image...
I know I'm not being descriptive enough, so to fruther explain: I want it to be like this:
http://chloescheffe.com/
you see how on that website the background image is.... everything basically. And when you change the size of the webpage, the background image changes accordingly?
how can I do that on my tumblr blog?
THANKS :)
with css. set the height and width of your bg image to 100%. sorry, i'd give you the code but this keyboard doesn't have all the characters of a larger one.
use the background-size css property w3schools.com/cssref/css3_pr_background-size.asp
You can do this two ways using background-size. One will stretch the image and one will fill the width properly, but cut off the bottom.
For stretch, add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
For width-fill (this looks better with your current blog), add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: cover;
}