CODEWITHSUNDEEP
cssbackground-image
Tai
Tai

Reputation: 21

Why does my image tile when the background color is set css

When I use this code the image tiles itself:

.module-36{
  background:black;
  background-image: url("image.jpg"); 
}

But when I use this code the image is just one solid image covering the background:

.module-36{ 
  background-image: url("image.jpg"); 
}

More just curious as to why this happens so that if needed I can manipulate accordingly?

Upvotes: 0

Views: 636

Answers (3)

Rob
Rob

Reputation: 15160

Just do background-color:black. That won't have the repeat issue you are having as it is specific to what you are trying to do.

The background property is a combination of several attributes including background-repeat. https://developer.mozilla.org/en-US/docs/Web/CSS/background

Upvotes: 1

A Haworth
A Haworth

Reputation: 36512

background-repeat repeat is the default setting, so yes setting the background property overrides any previous setting of repeat.

I am unable to reproduce your problem using the CSS you have given (both examples give tiling) so something else is setting a no-repeat which then gets overridden by the background setting.

This wouldn’t happen if you used the more specific background-color property.

Upvotes: 0

James Frearson
James Frearson

Reputation: 19

Try adding:

background-repeat: no-repeat;

Below is a link which shows you some of the different values background-repeat also accepts...

https://www.w3schools.com/cssref/pr_background-repeat.asp

Upvotes: 1

Related Questions