Css background image repeating

Question

HI my background image being shows 5 times in a row i am new to html and i have googled a little but but cant find the right words to google i have this code in my file

<!DOCTYPE html>
<html>
    <head>
        <title>'Cyclone development'</title>
        <link href="styles/main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
<hl>Cyclone development</hl>   <img src="cyclone.jpeg" alt="Italian Trulli">
<p>Who are we ?<br></p>
   <ans> We are a development team dedicated towards coding we make coding videos on youtube 
    for our users to learn and develop.
</ans>
    </body>
</html>

and this in main css file

hl{
    color: rgb(0, 0, 0);
    padding: 10px 10px;
font-size: 80px;
background: url(macoswall.jpeg);
background-size: 120px 120px;
}

body{
    background: #999;
    font-family: arial;
}

p{
    color:rgb(255, 0, 0);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: italic, bold;
    background-color: rgb(0, 60, 255);
    background-size: 300px 100px;
}
ans{
    color:rgb(255, 0, 0);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: italic;
}

My background image for hl is repeated several times while displayed like this how can i fix it?

just read the docs about [css background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) — Sfili_81, Jan 15 '21 at 07:45
Do you mean background image repeats for exactly 5 times or no repeat? — Sato Takeru, Jan 15 '21 at 07:54

score 2 · Answer 1 · answered Jan 15 '21 at 07:45

2

It'd be something like

body {
  background-image: url("paper.gif");
  background-repeat: no-repeat;
}

You can check the MDN doc. Also, you can put everything into a shorthand.

answered Jan 15 '21 at 07:45

nonopolarity

146,324
131
460
740

lukeocom · Answer 2 · 2021-01-15T07:52:22.257

You can use the background-repeat property to fix this.

background-repeat: no-repeat;

You might like to try using 'cover' or 'contain' for your background-size property too.

Also, it might be easier to use hex for your color, i.e.

rgb(0,0,0) => #000
rgb(255,0,0) => #f00
rgb(255,255,255) => #fff

etc...

Also, for most properties like padding, margin etc, you can just set one dimension if all dimensions are to be the same.

padding: 10px 10px => padding: 10px

I would also suggest setting a root font size, and then using relative units for your element font sizes. This makes it simple to make global font size changes, such as when adding accessibility controls.

:root { font-size: 10px; }
h1 { font-size: 8rem; //== 80px}

Darwin · Answer 3 · 2021-01-15T08:01:12.520

0

Because you want background for h1:

hl{
    color: rgb(0, 0, 0);
    padding: 10px 10px;
    font-size: 80px;
    background: url(macoswall.jpeg);
    background-size: 120px 120px;
    background-repeat: no-repeat;
}

of course, I think you should be use h1 instead of hl tag

edited Jan 15 '21 at 08:01

answered Jan 15 '21 at 07:49

Darwin

1,695
1
19
29

Css background image repeating

3 Answers3