Background image issues

my code is perfect until i add a background image

yes, that image is available in my text editor under IMAGES

i have a problem

i add the background image and my nav goes wonky

kindly help me out?

Also, if you can, please…

my plan is to use the background image NOT to scroll but have the other content scroll

i have done some research already, and its not clear to me : (

follow up : )

lease respond to this post

}

#banner {

background-image: url(images/MaxPixel.freegreatpicture.com-Beer-Garden-Oktoberfest-Beer-Glass-Beer-Bavaria-927666_4.jpg);

 background-size:cover;

background-repeat: no-repeat;

display: flex;

height: 48rem;

 text-align: center;

justify-content: center;

align-items: center;

}

#banner h1 {

font-size: 14rem;

font-weight: 300;

color:#1a8cff;

position: relative;

top: 9rem;

}

#banner h6 {

color:black;

position: relative;

top:20rem;

font-size:6rem;

}

#about p{

margin-right: 30rem;

margin-left: 30rem;

font-size:2rem;

color:black;      

}

h5 {

text-align: center;

}

#mail {

font-size: 2rem;

text-align: center;

color:black

}

#facebook {

font-size: 4rem;

color: black;

}

p {

font-size: 5rem;

margin-left: 10rem;

}

#top {

font-family: "Cherry Swash";

margin-top: rem

}

.row{

margin-left: 5rem;

margin-top: 4rem;

font-size:2rem;



}

ul a:hover {

   background-color: blue!important;

color:white;

border-radius:1rem;

-webkit-transition: 1s all;   

width:25rem

}

#top img{

border-radius: 12rem;

margin-left: 5rem;

    margin-top: 1rem;

margin-bottom: 1rem

}

Hey there @obxjuggler :slightly_smiling_face:

How are you trying to add the background image? You did not include the code to add one.
Also, for which section of the page are you trying to add it? I would guess the <body>.

The CSS property for a background image is as such:

body {
    background-image: url("url of the image");

Does yours look similar to this?
Another important thing to check would be that your file path is correct.


The way a background scrolls is specified with the CSS property background-attachment, which I recommend reading the documentation on:

For your purpose, you are most likely going to want to use fixed

Hi Shaylin!

crisis averted

I figured it out!

simply adjusted my code

has this ever happened to you? : )

but THANK YOU!!

how much of my first million do I owe you?

Tim

8-bit-gaming Volunteer Super User
September 28

Hey there @obxjuggler :slightly_smiling_face:

How are you trying to add the background image? You did not include the code to add one.
Also, for which section of the page are you trying to add it? I would guess the <body>.

The CSS property for a background image is as such:

body {
    background-image: url("url of the image");

Does yours look similar to this?
Another important thing to check would be that your file path is correct.

1 Like

Excellent and well done!!

I haven’t had this specific problem with backgrounds, but when I first started using them I had a lot of problems getting them to size correctly.

My pleasure to try and help, you don’t owe a penny.
I’ve learned much myself from the community here. :slight_smile:

1 Like

it works flawlessly!

i am happy!

however…on my small device there is no “fixed”

the background scrolls with the content on top

i tried every thing i could think of in the media queries

i would think this is an easy fix, but i simply dont know

kindly provide the code, for tablets too

help, please : )

Well, I did some quick research on this and apparently it would seem background-attachment: fixed; is not supported by the majority of mobile browsers:

There were a couple solution I saw, but they are reported to have mixed results.
These include making an element with a background picture and styling it with:
position: fixed; and some more complicated ones like this:

I seriously and sincerely want to thank you for your extra support,

going that extra mile for me!!!

most appreciated!!!