Search code examples
javacssheaderelementbackground-image

Making text fit in background image while resizing window

I am a beginner web dev, and I have a problem regarding CSS. So essentially, I want to make my h1 and all of my nav links fit inside of the background image I have in the body. Home Page full screen

Although when I re-size the window to much smaller, it leaks out the bottom of the image. Home header spilling out bottom

I've tried setting the background image within the h1, but it just takes up the sliver of the header space and not the whole page like I want it to. I've also tried overflow on the header, making the font size a percentage, and some other solutions I've found just seemed very complicated, or included fixed heights which I was told was a no no. Here is my css

h1{

color: #F7F88B; }

a {
color: #F7F88B;
text-decoration: none;
font-weight: bold;
font-size: 100%;

}

body {

background-image: url("photos/mixmusebackground.jpg");
background-size:cover;  
background-repeat:no-repeat;

}

I suppose my goal is to change the size of the text relative to the image in the background so it stays in one place. Thank you guys for your help!

Solution

  • You could utilize CSS media queries to adapt your site to different screen sizes: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Using media queries, you can define breakpoints like this:

    a {
 font-size: 1rem;
}

@media screen and (max-width: 700px) {
 a {
  font-size: 0.5rem;
 }
}

    In this example, you're instructing the browser to apply a font size of 0.5rem to anchor tags when the viewport width is less than 700px.

    Another option you could consider is creating a "burger menu." This type of navigation menu is typically used on smaller screens. Here's an example:

    HTML (index.html)

    <html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <nav>
        <input type="checkbox" id="hamburger">
        <label for="hamburger" class="hamburger">
            <i></i>
            <i></i>
            <i></i>
        </label>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

    CSS

    body {
    margin: 0;
    padding: 0;
}

nav {
    background-color: #333;
    padding: 10px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.hamburger {
    display: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger i {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
}

/* Show the hamburger icon on small screens */
@media screen and (max-width: 600px) {
    nav li {
        float: none;
        width: 100%;
    }

    /* Display the hamburger */
    .hamburger {
        display: block;
    }

    /* Hide the menu by default */
    nav ul {
        display: none;
        width: 100%;
    }

    /* Show the menu when the hamburger is clicked */
    #hamburger:checked ~ ul {
        display: block;
    }
}