Can someone assist me in creating a header background image that can scale properly?

Hey there! I'm looking to make the background image for the header on my website scalable so it remains visible on any device while ensuring that the text is still readable. Is this even possible? Currently, I am working on pogl.co/ and need it to look similar to www.blacksmithsarms.com/

Any help or advice would be greatly appreciated.

Thank you, Josh

Edit: This is what I have tried so far:

.bill-board{
background: url(../img/backgrounds/rig.jpg) no-repeat;
margin: 0;
padding: 0;
}

I want it to be scalable like this example:

https://i.sstatic.net/tITED.jpg

htmlcssimage

Answer №1

Consider this approach: Opt for inserting an img tag directly instead of relying on a background image.

<div class="bill-board">
    <img src="img/backgrounds/rig.jpg"/>
 </div>

design

.bill-board img{
  height:auto;
}

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

Making alterations to the content of a division using getElementById().innerHTML yields no difference

Recently, I've been working on a JS project inspired by a short story from my high school days. The story featured robot crabs living on a small island, and I wanted to create a simulator where players could set the initial parameters and watch as the ...

javascripthtmlcss2d-games

How to align a div with a background in CSS to the center

I'm attempting to center a text and an icon, but the icon is set within a background. How can I center the text and position the icon just to the left of the text? Here is the link to the fiddle with the code: jsfiddle <div class="error divErro ...

htmlcsscss-float

a table in HTML with cells positioned in the center

My requirement is for a table with one row and 5 cells. The first/left cell should be left justified, the last/right cell should be right justified, and the middle 3 cells should be centered with equal spacing between them. The table itself has a "100% wid ...

htmlhtml-table

Displaying additional slides on Bootstrap 4's fully responsive carousel

I am currently using Bootstrap 4 carousel and attempting to make it full width. It appears to be full width initially, but upon viewing it on larger screens, the subsequent sliders after the first one are displayed as well. You can try zooming out the wind ...

csstwitter-bootstrapbootstrap-4

Design a stylish outline for the element <div class="loader">

Initially, I managed to create a border around the body without any issues. However, I encountered a problem when attempting to implement a rotating border animation. In order to achieve this, I had to create a div encompassing all my content. The issue ar ...

htmlcssborder

Transferring information among forms with PHP and jQuery: Selecting sequential dropdowns

One of my challenges involves managing 2 input forms - Subject and Unit. It's important to note that Units are categorized within specific Subjects. For example: Subject - English, Math Unit - Nouns, Tenses, Algebra, Geometry In the database, the u ...

phpjqueryhtmlajaxforms

Inspect HTML elements using Jinja2 placeholders

I am a beginner in the world of web development, currently learning how to create Flask webapps. I am using Atom along with some addons like PreviewHTML to help me visualize live previews of my HTML code. However, I am facing an issue where I cannot see a ...

pythonhtmlflaskjinja2atom-editor

How to align a child element in the center when the parent is not centered or taking up the full width

I am currently working on building a layout with Bootstrap 4.6, and I am facing an issue with centering the header, columns/cards, and buttons on the page width while the parent container is left-aligned and not full width. Additionally, I need help with ...

htmlcssbootstrap-4

My website is constantly showing HTML code instead of rendering properly

the text and my other content are appearing on the website. after passing through a function that formats it into lines and stanzas, this is how it looks: [ 'If you can talk with crowds and keep your virtue,', 'Or walk with K ...

htmlnode.js

The canvas is responsive to keyboard commands, however, the image remains stationary and unaffected

As I delved into the basics, incorporating canvas, CSS, and JavaScript, a question arose: should the image be housed in the HTML or the JavaScript code? Following this, I added a background color to the canvas and defined properties of the canvas in JavaSc ...

javascriptcsshtmlhtml5-canvas

What is the best way to set the width of a fixed div based on its parent div's percentage width?

Having trouble setting a fixed div to be the same width as its parent element, which is itself size relative to another div. To clarify, here is a code snippet that demonstrates the issue: HTML <div class="grandparent"> <div class="parent" ...

htmlcsswidthfixed

Applying the jqtransform plugin to all forms except for one

We've implemented the jQuery jqtransform plugin to enhance the appearance of our website's forms. However, there is one particular form that we'd like to exclude from this transformation. I made adjustments to the script that applies jqtrans ...

javascriptcssformsjqtransform

Creating a gradient border around a div using CSS3

Can a border like this be achieved using only CSS, or will I need to use an image? ...

htmlcssborder

What could be causing my links to not appear in Internet Explorer 9?

Why are my links not showing up properly in Internet Explorer 9? If you prefer not to visit the website, you can directly access the style sheet at... This issue is specific to IE 9 and does not occur in other versions of Internet Explorer. ...

htmlcsscross-browserinternet-explorer-9

The CSS grid header is malfunctioning on Chrome and Opera, while functioning correctly on Firefox

My first attempt at creating a website layout using grid was successful in Firefox, but not in Chrome and Opera. The header is taking up only about 1/3 of the width, leaving the rest empty on these browsers. However, everything else, including the mobile l ...

htmlcssgoogle-chromefirefoxcss-grid

Deselect a checkbox by selecting a radio button with just Javascript code

Hey there! I'm currently delving into the world of pure JavaScript and could really use some guidance on a particular issue. Here's what I'm aiming to accomplish: I'd like to design a checkbox that triggers the opening of a window whe ...

javascripthtmlcss

The `user-select: none` property displays distinct behavior in Safari

My Goal I am in the process of creating an input-like content editable div. The idea is to click on tags outside the div and insert them inside the div while still being able to type around these tags. The Issue and Reproduction Steps To prevent tag but ...

javascripthtmlcssvue.jsrangy

html carousel not updating in popover

I've been attempting to create a popover with a bootstrap carousel, where the carousel items are dynamically generated and appended from a script. Despite my efforts, I have successfully displayed the carousel but struggle to append the items. I' ...

javascripthtmljquerycarouselbootstrap-5

Exploring the World Wide Web with BeautifulSoup4

I am trying to extract all the times from a webpage and store them in a list variable. How can I achieve this? Any help is appreciated. <div class=panchang-box-secondary-header> <div class="list-wrapper pl-2"> <div class="li ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

What is the best way to create a unique shadow effect for a container in Flutter?

I am facing a challenge with my screen layout that uses GridView.builder with crossAxisCount: 3. In the itemBuilder, I am returning a Container with shadows on the left, right, and bottom, but so far, I have not been able to achieve the desired outcome. H ...

cssflutterdartcontainersshadow