How can you showcase a background on both the top and bottom of a div at the same time? #dual

Trying to add a gray rectangle (indicated by the red circle) at both the top and bottom of a div that contains thumbnails. This div may have 2 or 3 rows of thumbnails.

Image:

Current code snippet:

.jq_thumbnails {
    background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
    overflow: auto;
    height: 100%;
}

Is there an easy way to achieve this effect? I was thinking of using an ifequal tag to check the length of the thumbnail list and adjust the background picture accordingly, but wondering if it can be done with just HTML/CSS?

djangocss

Answer №1

You have the ability to take advantage of CSS3 Multiple Background Images by visiting this link:

.jq_thumbnails {
    background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
    background-position: 0 0, 0 bottom;
}

To customize based on your specific needs, adjust the background-repeat property accordingly:

background-repeat: repeat-x, repeat-x;

Good news - this feature is currently supported in all major browsers!

Answer №2

Creating an outer div along with an inner div that encompasses the background enables you to utilize the repeat-y function for the background design.

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

Refashioned: The Bootstrap design shifter concept

Hi there! I am currently working on implementing a layout shifter pattern with Bootstrap 4. So far, I have successfully positioned 2 colored boxes responsively, but I am facing some challenges with getting the third box in the right place. If you have an ...

csstwitter-bootstrapbootstrap-4

Automatically scroll to the end of the data retrieved through ajax

I am currently developing a live chat website for my users and I am using ajax to fetch the chat messages. However, I am facing an issue where whenever I enter a new message, it does get added to the database and displayed, but the scroll doesn't auto ...

javascriptjquerycssajax

Dynamic Menu Highlight Styling

I'm having trouble highlighting the current menu item when clicked using CSS. Here is the code I have: #sub-header ul li:hover{ background-color: #000;} #sub-header ul li:hover a{ color: #fff; } #sub-header ul li.active{ background-color: #000; } #su ...

javascripthtmljquerycss

Quickest method to create a new empty stylesheet in the developer tool of Chrome's inspector ("Inspector stylesheet")

When testing CSS modifications live in Chrome, I typically use the following method: Right click > Inspect Then, I use the bottom right panel and click the + button to add a new class which I can edit directly. https://i.sstatic.net/VX57R.jpg Howe ...

htmlcssgoogle-chrome

Combining a Subquery with Django ORM

Struggling to convert this query into Django ORM syntax, I've experimented with various combinations of annotate/values/filter without success. I have yet to try creating a custom Manager. SELECT t.id, t.name, dt.deadline dt.deal_id F ...

pythondjangodjango-modelsdjango-orm

What is the best way to incorporate an animation into my text bubble? Specifically for a Twitch Alert, such as a bits alert

I'm attempting to customize my Twitch Alert in Streamlabs using code. Is there a way to incorporate animation into the text balloon? I've looked for tutorials or guides but haven't had any luck, so I could use some guidance. CSS #alert-use ...

htmlcsscss-animations

Text overlay on Material UI Card

I am currently using the Material UI Card and CardMedia components in my application, but I am having trouble with overlaying text on top of the image. Below is a simplified version of what I have been attempting: <Card> <CardMedia image={this. ...

cssreactjsoverlaymaterial-ui

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

javascriptjqueryhtmlcss

Desktop display issue: Fontawesome icon not appearing

Having trouble getting the fontawesome icon to display properly on my website. It appears in inspect mode, but not on the actual site itself. Any suggestions on how to fix this issue? import React, { Fragment, useState} from "react"; import { Na ...

javascripthtmlcssreactjsfont-awesome

Is it possible to adjust CSS values in a relative manner?

#bar{font-size:14px;} The font size of #bar is set to 14px. #foobar{font-size:$-2px} // Fictional code The font size of #foobar is now 12px. (calculated as 14px - 2px) Is there a way to dynamically alter the value of a selector like this? ...

htmlcss

Personalized Tumblr-style button

Hey there, I've been working on creating a custom Tumblr-like button and tried adding an iframe above it to make it clickable. However, something seems to be off as it's not functioning properly. I'm still trying to wrap my head around how i ...

javascriptcssiframetumblr

Div not centered after translation by 50% on the Y-axis

My HTML and body have a height of 100vh. Inside my body, I have a square that is 100px by 100px. When I apply top: 50% to the div, it moves down 50%. But when I apply translateY(50%) to the div, it does not move down 50%. Why is this? Please note that y ...

htmlcss

What is the best method for inserting a URL link using jQuery within a CSS element?

Check out this code snippet: <span class='maincaptionsmall'> Test </span> Due to certain ajax and jquery scripts on my page, I am unable to use HREF as a link. In other words, the following code won't work: <span class=&ap ...

javascripthtmlcsshyperlinkhref

Trouble with Safari browser windows and Mac Safari compatibility

Hello everyone, I have a CSS code that I need help with. See below: .left { margin-bottom: 20px; } It works fine on Windows OS with Safari and Chrome browsers, but it's all messed up on Mac OS Safari. After debugging in Mac, I found that it need ...

htmlcssmacossafari

The theme for Wordpress in 2015, also known as

Is there a way to automatically resize and fit the cover picture in the twenty fifteen theme to make it a square cover instead of the default rectangular one? I've been trying to change the dimensions of the cover image container but can't seem t ...

htmlcsswordpressthemes

Firefox struggles to properly position tables that exceed a width of 767 pixels when using Bootstrap

I have designed a basic website featuring a Bootstrap navbar with tabs. Each tab displays a table. You can view the layout here. Everything functions correctly in Chrome 45 and IE 11 on Windows 8.1. However, when using Firefox, the tables are positioned ...

cssfirefoxtwitter-bootstrap-3

When using PyCharm, auto-imports may not recognize the Django project name

When using PyCharm, you have the ability to automatically import a class that is not detected within the current file. For example, if you input a method or class name that is not found in the file, PyCharm will insert an import statement for it. However, ...

djangopycharm

Is there any practical reason to choose tables over CSS for controlling layouts?

As I dive into updating a large amount of code for a web application, I've noticed that tables are heavily used throughout to manage layout. Being relatively new to HTML programming, I find myself questioning the necessity of using tables when CSS co ...

htmlcssbrowserhtml-table

Trouble with Z-index on FireFox when using absolute positioning

After reviewing some other questions, it seems that the z-index issue in Firefox is often related to one of the items not being set as position:Absolute. <div id="AnimatedBanner" style="right:-5px;"> <object style="positio ...

htmlcssfirefox

What is the best way to showcase a form input with specific size and character limit attributes in Django?

What is the best way to display a DecimalField() within a model form with max_digits set to 5? <input type"text" size="5" maxlength="5" /> ...

djangodjango-templatesdjango-forms