#Help with background

13 messages · Page 1 of 1 (latest)

frozen igloo
#

Hey I am completely new to web development and I am trying to learn/understand the basics

image.png
#

how can I make the background and the border to be around the text only and not in the full screen?

# 
    background-image: url('images/minimalist-background-gradient-colorful-style_698780-826.avif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
header, main, footer {
    text-align: center;
}
p{

    color: rgba(0, 51, 145, 0.877);
}
#home, #about, #contact {
    font-weight: bold;
    font-size: 130%;
}
.center{
    text-align: center;
    
}
h1 {
    font-size: 300% ;
    background-color: rgba(240, 255, 255, 0.61);
    border: 2px solid black;
    padding: 5px;
    display: inline-block;
}
h2,p{
    background-color: rgba(240, 255, 255, 0.61);
    font-size: 130%;
    border-radius: 1000px;
    padding: 20px;
    border: 2px solid black;
    
}```
#

This is my css code

#

in h1 I used display: inline-block; to get the result I wanted

#

but when I type it in h2,p it looks like this:

#

and the headers go in the same line as the texts

hollow frost
#

I am still new to programming so my input is just me thinking out loud and brainstorming,

I believe what you can do is to try and give them the attribute {display:relative}

#

That way they won't overlap each other

hollow frost
#

Or maybe just display:block

#

Or in the even previous code, change the width of the border, then add

Justify-content:center

stuck field