Putting image in css behind text-CodePudding

I have a question. I'm making some web site only using Html and CSS. I wanna put background image behind some text. So I put it over .class in CSS behind text, picture loads behind text but it wont load in full size it only loads in size of text. I tried so many things I found online, as some full-size codes maximizing width and such things. I hope I explained it in a way you all will understand. I appreciate it in forward. Cheers

CodePudding user response：

I'm not sure I've understood your question correctly but here is my suggestion. Assuming you want an image of a certain size to appear behind a block of text as shown below then here are two approaches you could use

for the image on the left:

the code would be:

.image-cont {
  width: 10rem;
  height: 10rem;
  position: relative;
  overflow: hidden;
  margin: 0.5rem;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  z-index: 1;
}

<div >
  <img  src="https://images.pexels.com/photos/5812887/pexels-photo-5812887.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
  <p >This is a sample text</p>
</div>

for the image on the right the code is:

.image-cont_2 {
  width: 10rem;
  height: 10rem;
  position: relative;
  overflow: hidden;
  margin: 0.5rem;
  background-image: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&=format&fit=crop&w=800&q=60");
  background-size: cover;
}

.txt_2 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  z-index: 1;
}

<div >
  <p >This is a sample text</p>
</div>

CodePudding user response：

As some other users have mentioned it would be helpful to include an example, however I think I understand your issue from your description.

It sounds like you are adding a background image behind text and expecting the dimensions of the image to be taken into account when it displays on the page. This will not happen.

This is because a background image in not an html element, it's just CSS. Background images sort of float behind the element and don't take up any "physical" space on the page.

You say the background image "wont load in full size" - but it actually is loading in full size. It's just being cut off. The size and position of a background image will always depend on the html element it's applied to (in your case, the text).

Here's an example of a background image applied to an element and how it will behave differently based on the height of the element it's applied to:

(Also I used "background-size: cover" to get the background image to adapt to the size of the div. More on that property here: https://www.w3schools.com/cssref/css3_pr_background-size.asp )

TL;DR - You need to make your text bigger if you want the background image to be bigger.

.bg-image {
  background-image: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1600');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
  color:#ffffff;
  font-size: 24px;
}

.large-div {
  height: 50vh;
}

<div >This is some text</div>

<div >This is some text</div>