Adjust the size of the background image using a media query

.logo {
    background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
    background-size: 100%;
}

@media(max-width:767px) {
.logo {
    background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
  background-size: 50%;
  background-repeat: no-repeat;

}
    }
<div class="logo"> </div>

I'm puzzled as to why this isn't functioning properly - anyone have any thoughts on why the image isn't displaying?

HTML:

<div class="logo"> </div>

CSS:

.logo {
background-image: url(../img/logo_white.png);
background-size: 100%;}

@media(max-width:767px) {
.logo {
background-image: url(../img/logo_white.png);
background-size: 50%;
background-repeat: no-repeat;}
}

Any assistance would be greatly valued

css

Answer №1

Give this a shot...

@media screen and (max-width:767px)

Answer №2

First and foremost, your syntax was not correct. Additionally, in the provided code snippet, your div had a size of zero. Take a look at how it should be done:

.header {
  display: block;
  width: 100%;
  height: 200px;
  border: solid 1px blue;
  background-image: url('http://example.com/image.jpg');
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .header {
    background-size: contain;
    background-repeat: no-repeat;
  }
}
<div class="header"></div>

Are you aiming for responsiveness with this design? Perhaps there is a misunderstanding regarding the background-size: contain; property?

Answer №3

Hey there, here's a quick tip: make sure to add some height to your wrapper.

.logo {
    background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
    background-size: 100%;
    width: 100%;   
    height: 100px;
}

@media(max-width:767px) {
    .logo {
        background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
      background-size: 50%;
      background-repeat: no-repeat;

    }
}
<div class="logo"> </div>

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

Horizontal Accordion Design for Cascading Style Sheets (CSS) Books

I am currently working on developing a page that features a book layout. This page will include tabs that users can expand individually. If you would like to see a working example, you can check out this link: https://codesandbox.io/s/book-layout-l28gh?fi ...

javascriptcssreactjs

Layout of CSS grid being created dynamically

The concept of the CSS grid layout, as explained here, demonstrates that the grid cells are structured in the markup without hierarchy. The arrangement into rows and columns is managed through CSS directives like grid-template-columns. An illustration for ...

javascripthtmlcssvue.jstemplates

Translate3d increases the whitespace towards the end of the page

After implementing a smooth scroll on my webpage using transform translate3d, I encountered an issue. The translate3d function seems to be adding extra space at the end of the document, as illustrated here: https://codepen.io/anon/pen/WEpLGE I suspect the ...

javascriptcss

Position the button at the bottom of the card using Bootstrap

While exploring a Bootstrap example utilizing the card-deck and card classes (Pricing example), I pondered over how to align buttons correctly when one list has fewer items than others. https://i.sstatic.net/IGN7K.png I aim to vertically align all button ...

htmlcsstwitter-bootstrapbootstrap-4

The functionality of Bootstrap icons is not functioning properly

After downloading a customized version of Bootstrap with only the icons, I encountered issues trying to incorporate them into my site. Despite copying and pasting the icon styling into my existing bootstrap.css file, the icons were still not displaying pro ...

cssruby-on-railstwitter-bootstrap

React Bootstrap hover animation technique

UPDATE: I decided to give react-bootstrap a try for tooltips, hoping it would finally work as expected. Unfortunately, even after implementing the code, I am still facing issues with getting the tooltip effect to show up when hovering over the button. Th ...

javascriptcssreactjsbootstrap-4react-bootstrap

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

Take for instance the scenario where I possess the URL example.com/#foo. In this case, CSS styling will be directed to the div with the id foo. If achieving this solely in CSS is not feasible, what methods in JavaScript or jQuery can be used efficiently ...

javascriptjquerycss

What is the best way to insert two rows directly in the middle of two Bootstrap columns?

I need to align two rows in a straight line. Similar to the example shown in the image below: https://i.sstatic.net/EwRat.png After that, I want to split the Bootstrap into two columns, one with col-md-8 and the other with col-md-4. In the col-md-8 col ...

htmlcsstwitter-bootstrap

Creating a slider for text: Step-by-step guide

I want to develop a dynamic text slider for showcasing customer reviews on my website. I am in the process of building a website and would love to have a section where clients' feedback can be displayed one after another seamlessly. ...

javascripthtmlcsstextslider

Tips for eliminating the ripple effect when clicking on a q-list item

I have managed to create a sleek sidebar with a curved edge that seamlessly integrates into the body of the page. However, I am struggling to remove the semi-transparent ripple effect that appears when clicking on a list item. The current effect clashes ...

cssvue.jsquasar-frameworkquasar

Is there a way to eliminate the table-hover effect on specific rows in the table?

Here is some HTML: <table class="table table-striped table-bordered table-condensed table-hover"> .... </tr> <tr ng-repeat-end ng-show="modelRow.activeRow==car.name" class="hidden-table"> <td colspan="6"> ...

htmlcsstwitter-bootstrap

What is the reason behind utilities.scss taking precedence over styles.scss and local scss files?

After defining the mt-5 class in both my component's .scss file and the root styles.scss, I noticed that they were both overwritten by _utilities.scss. This left me wondering why this was happening. https://i.sstatic.net/idnze.png https://i.sstatic.n ...

cssangulartwitter-bootstrap

Dimensions properties for a webpage displayed within a DIV element

I was attempting this in an iframe previously, but now I have managed to make it work in a DIV. However, I am facing issues in achieving the desired properties. When I try to modify the properties of the 'siteloader', it seems to ignore the embe ...

jqueryhtmlcssheightembedding

I recently attempted a meyers reset and now I'm struggling to get my unordered list to display in a horizontal layout

Check out my code snippet below: .navbar-container { width:100%; display:inline-block; } ul { list-style-type: none; display: inline; } <div class="navbar-container"> <ul> <li><a href="gmail.com">Gmail</a>& ...

htmlcss

Creating a CSS image grid without relying on object-fit: cover can be achieved by

My goal is to create a horizontal masonry grid similar to Adobe Stock and Shutterstock without altering image aspect ratios by using object fit or any other stretching techniques. All the solutions I've found so far involve object-fit: cover, which c ...

htmlcssimagegridresponsive

The main menu vanishes when you hover over it after the affix class is activated

I am currently working on creating a horizontal dropdown menu that expands on mouseover and collapses on mouseout under one of the main menu items. The functionality of this effect is working fine, except for one issue. When I scroll down and activate the ...

jqueryhtmlcss

Background image not displaying

My web page has a background image set using this CSS: body, html { background-image: url(Content/Images/bg-lounge-2-l.jpg); background-repeat: repeat; background-attachment: fixed; /*background-position: 0 -390px;*/ } ...

css

What could be causing the DIV to be out of place when the window is resized?

When the window is minimized, all elements remain intact except for the navigation. https://i.sstatic.net/xewNu.jpg The image below shows the layout when the window is maximized, while the image above depicts the layout when the window is minimized. HTM ...

htmlcssmargin

Searching for text within an HTML document using Selenium in Python can be easily achieved by using the appropriate methods and

Is there a way to find and retrieve specific texts within an HTML file using Selenium in Python, especially if the text is not enclosed within an element? <div class="datagrid row"> ==$0 <h2 class="bottom-border block">Accepted Shipment</h ...

pythonhtmlcssseleniumselenium-webdriver

Expanding Highcharts Tooltip Size Automatically Based on Content Updates

I am dealing with a Highcharts graph that has tooltips showing a loading spinner upon hover. These tooltips fetch data from the server via AJAX, but when the content is updated, it overflows due to the tooltip not resizing. Below is the SCSS code snippet I ...

javascriptcssajaxhighcharts