How to set a background image on web page

Question

I am trying to set a Background Image which is a URL: https://homepages.cae.wisc.edu/~ece533/images/airplane.png

When i try like below it is not working

body {
  background-image: url("https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
  background: linear-gradient(red, pink);
}

first duplicate to explain how to use multiple background, second duplicate to explain the strange repeat of the gradient — Temani Afif, Mar 24 '20 at 08:56

score 1 · Answer 1 · answered Mar 24 '20 at 08:53

1

You need to combine the two within background-image:

body {
 background-image: 
   linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
   url("https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
 background-size: cover;
}

answered Mar 24 '20 at 08:53

Anurag Srivastava

14,077
4
33
43

sir, I am able to get it but in the mobile view image size is not rendering correctly – Abdul Azeez Mar 24 '20 at 10:02
You need to also use `background-position` and media queries. Check the web for many good examples – Anurag Srivastava Mar 24 '20 at 10:12
Oh ok. if you dont mind can you please help me with some example. I am not a front end guy so i dont know much about this :( – Abdul Azeez Mar 24 '20 at 10:14

score 0 · Answer 2 · answered Mar 24 '20 at 08:54

0

The second line background: linear-gradient(red, pink); is overriding the first one. I don't know what exactly you want to do, but remove the second line or group them like in the other answer.

answered Mar 24 '20 at 08:54

KastenBrot

87
2
13

How to set a background image on web page

2 Answers2