Header with a stable background image that adjusts responsively

While attempting to convert a PSD to HTML, I encountered a small issue. Please refer to the image below:

https://i.sstatic.net/5KoIV.jpg

As indicated by the red arrow, there is a blue background image in the header of the template! How can I add this background with a responsive and stable position that adjusts even when the browser size changes? The background should always occupy 70% of the screen (ending between the logo and the first nav-item).

Here is the link to the code on jsfiddle: https://jsfiddle.net/4dpgbLt9/2/

html,
body {
  height: 100%;
}

body {
  font-family: IranSans, sans-serif;
}

.header {
  height: 100vh;
  width: 100vh;
  background: url("https://i.imgur.com/aN7jCZE.png") left no-repeat;
  background-size: contain;
}

.navbar {
  direction: rtl;
  padding-top: 16px;
}

.nav-item .nav-link {
  font-size: 16px;
  padding: 0 20px 0 20px !important;
}

.nav-item.active .nav-link {
  color: #ffd738 !important;
}

.nav-item .nav-link {
  color: #ffffff !important;
}

.nav-account-parent {
  position: relative;
}

.nav-account {
  position: absolute;
  width: 100%;
  height: 100px;
  top: -50px;
  z-index: -1;
  background-color: #025c64;
  border-radius: 16px;
}

.navbar-brand img {
  width: 220px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-transparent justify-content-center">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="https://i.imgur.com/gURHBju.png" alt="Logo">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">صفحه اصلی</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">درباره ما</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">درخواست مشاوره</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">خدمات</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">فروشگاه</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">ارتباط با ما</a>
          </li>
          <li class="nav-item nav-account-parent">
            <div class="nav-account"></div>
            <a class="nav-link" href="#">ورود / عضویت</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="header">

  </div>

Thank you for your assistance ♥

Answer №1

Here's how I approached the problem:

  1. Modify the .header CSS property for width from 100vw to 100%
  2. Change the background-size property from contain to 70% within the .header class
  3. Include top in the background: property to anchor it to the top left

Updated CSS:

.header {
    height: 100vh;
    width: 100%;
    background: url("https://i.imgur.com/aN7jCZE.png") top left no-repeat;
    background-size: contain;
    background-size: 70%;
}

Codepen showcasing the solution: https://codepen.io/CodeBoyCode/pen/VEEoQW

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

Manipulating attribute values using Jquery

Currently, I am attempting to switch the src value of an iframe when a link is clicked by replacing it with the href from that link. By preventing the default action upon clicking the button, I can successfully update the src value with the url provided. H ...

Scraping the web using Python for HTML data retrieval

I'm working on a Python program to retrieve the card sub-brand and brand based on a card BIN number. The URL for this information is: . The code snippet below fetches the card type from the page. page = requests.get('https://www.cardbinist.com/s ...

Navigating dynamic URLs with various URI segments in cPanel

<a href="www.mysite.com/index.php?information/adminpanel/<?php echo $id;?>" name="approve" id="approve" ">Approve >></a> After redirecting to the specified URL, the correct ID is displayed in the address bar but unfortunately, ...

Bootstrap datepicker and timepicker icons are misaligned

While working on a Date Picker and Time picker in Bootstrap 4 with bootstrap-datepicker.js and bootstrap-timepicker.js, I encountered an issue. The calendar and time icon are not displaying correctly; they should be inside the input button but instead appe ...

Create two div elements containing responsive images using HTML and CSS

Can someone assist me in creating responsive DIVs with images inside? Currently, the second div is appearing below the first one, and I'm struggling to make them scale based on mobile and tablet screen sizes. Here is the code snippet: .new_ba ...

I am having an issue with the <a> element in my bootstrap carousel, as it is displaying a dead link

My carousel has an issue with the anchor tag, causing it to show a dead link. I am unable to hover over it and the link is not functioning when clicked. Everything else seems to be working fine in the div. All files from Bootstrap have been used and no cha ...

Ensuring the validity of float and non-empty values in JavaScript

Embarking on the journey of web development, I'm delving into basic applications. My current project involves creating a straightforward webpage to add two numbers and implementing preliminary validations - ensuring that the input fields are not left ...

Similar to using `display:flex` and `justify-content: center`, you can achieve centered

I have a group of n children within a div. I want to arrange them in a single row and center them horizontally. If I were to use flexbox, I could achieve this by: display: flex; justify-content: center; Is there a way to accomplish the same layout using ...

Submenu failing to appear

After reading a discussion on dropdown menu issues on a popular forum, I am still unable to locate the error on my website: . The submenu on the main top menu is not functioning as it should. My attempt to resolve the problem by changing the overflow sett ...

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

Boosting Your Theme - Eliminating Redundant Styles

Currently, I am facing more of a best practice issue rather than a coding one. I am in the process of creating a custom bootstrap theme inspired by https://github.com/HackerThemes/theme-kit. Although I have a functional theme that I am satisfied with, I am ...

`Is it possible to modify the background color of InputAdornment in Material-UI TextField?`

For the first 10% of the text field, one background color is used, while for the remaining 90%, another background color is applied. <TextField className={classes.root} type="text" placeholder="username" var ...

What is the best way to use AngularJS to extract values from the first dropdown menu that are linked to the values selected in the second

How can I link values in two dropdowns using AngularJS? Hello everyone, I have set up two dropdown fields in MyPlunker and within the ng-option tag, I have applied a filter like filter:{roles: 'kp'} to only display users with the role of kp. T ...

Add CSS styling to a single form

When working on a larger project, the goal is to reduce the size of various elements within a form named quickpost-form <div id="qp-form"> Specific elements in the form require a smaller font size such as text, input, input-group, and tex ...

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

Tips for accessing a DOM element's ::before content using JavaScript

Is there a way to retrieve the content of a DOM element's ::before pseudo-element that was applied using CSS3? I've attempted several methods without success, and I'm feeling very confused! // https://rollbar.com/docs/ const links = docum ...

Tips on adding style to your jQuery autocomplete dropdown

I am currently utilizing jQuery autocomplete functionality. I have configured it to communicate with a service and retrieve records: <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1 ...

Incorporating information collected from a modal form into a table using vue.js

insert code hereThis single page application allows users to input data into a modal, which is then automatically added to a table on the main page. var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById(' ...

Troubleshooting: Fixed Header Issue in HTML5 Responsive Web Design

My goal is to develop a simple HTML5 responsive web layout with a fixed header. I am striving to maintain clean HTML and CSS code while adhering to best practices. The header is designed to have a maximum width of 980 pixels, with a blue background that ex ...