Incorporating a variety of images into this hexagonal design framework

Hello there! I am just starting to learn CSS and HTML, and I have a question. Is it possible for me to use the same CSS styling but have different images inside each of the hexagons? I want to replace the image '' with multiple images without repeating too much code.

You can see what I mean by checking out the fiddle below:

<div class="pfhex1">
    <div class="hexagon hexagon2">
    <div class="hexagon-in1"><div class="hexagon-in2"></div>
    </div></div>

        <div class="pfhex2">
    <div class="hexagon hexagon2">
    <div class="hexagon-in1"><div class="hexagon-in2"></div>
    </div></div>

http://jsfiddle.net/1v57w6xh/

Thank you very much!

htmlcsscss-shapes

Answer №1

To modify the background image of a specific element, you have two options: either introduce a new class with the desired background image and add it to the target div, or define a new rule within your current selectors and set the background image there. For example:

.example-class .target-element {
/* new background image */
}

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

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)

I am interested in enhancing the design of the Angular 8 date picker by adding top and bottom arrows instead of the default left and right arrows. Can someone guide me on how to customize it? Check out the Angular 8 date picker here ...

javascripthtmlcssangular

Showing a diverse range of data types with null values in the Django admin list_display

My explanation of the title might have been unclear. I have a simple chat application where users can send text, audio, video, or images. To render these messages, I have a method that checks the message type and renders it accordingly. If the message is t ...

pythonhtmldjangodjango-admindjango-admin-actions

Is it usual for the container to overflow with div content?

Is this common CSS behavior? How can we make the container wrap around the button? http://jsfiddle.net/afrontrow/yepw7oLw/ CSS: .button { background: grey; padding: 10px 20px; } .container { border: 1px solid black; } HTML: <div class= ...

css

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

javascripthtmlcss

Guide on fetching and parsing JSON data in jQuery by utilizing a URL

As a newcomer to jquery, I am struggling to understand and parse the json format. In my icenium project, I have included this JavaScript function in my js folder but it doesn't seem to be functioning properly. $(document).ready(function () { ...

javajqueryhtml

Enhanced Bootstrap Carousel with White Background Transitions

Having trouble articulating my issue, so here's a video that should clarify: https://example.com/video I'm using a bootstrap carousel template for a full-width slider. Despite my efforts to remove the white-space transitions, they persist. Am I ...

javascripthtmlcsstwitter-bootstrap

What is the best way to target the specific DIV using a jQuery selector?

My dynamic div is filled with other divs... <div id="wrapper"> </div> //javascript for(//lots of times){ var d = document.cloneNode('divModel'); d.foo = {//a lot of stuff }; document.getChildById('wrapper').append ...

javascriptjqueryhtml

Can you provide instructions on how to display data in two lines within a mat-select field?

Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...

javascripthtmlcssangular

What are the steps to create a dynamic navigation bar in React without encountering hydration issues?

My goal is to dynamically show or hide links based on user authorization. Here's my initial approach: const Navbar = () => { const { canDo, ...} = useUser(); //A Zustand store return ( <> <div> <ul> ...

javascripthtmlcssreactjs

Tips for eliminating the border surrounding the entire table in Material-ui

Is there a way to edit a table in Material-ui without displaying it as a card? I'm looking to remove the border around the entire table, but I couldn't find any information on how to do that. Can someone help me out? Here is a link about the com ...

cssreactjsmaterial-ui

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

In my code snippet below: <html> <body> <div style="width: 700px;"> <span>test</span> <input style="width: 100%;"></input> </div> </body> </html> I am facing an issue where the span and input el ...

htmlcss

jQuery method for implementing alternating row colors that are not sequential

Starting from scratch here. I've fetched a table from a remote server where odd rows are white and even rows are grey. Some rows have been hidden: $("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white $(" ...

jquerycsshtml-table

When you click the button, the page refreshes with no content

Every time I click on a button, an empty page reloads after invoking the button's onClick event. The code snippet on the page is as follows: <html> <head></head> <body>2015</body> </html> I am ...

c#htmlasp.net

Grab images from clipboard, encountering blob Error

I'm having issues with copying and pasting images from the clipboard in Chrome. Can someone help me troubleshoot this error? Check out this js fiddle for reference Error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileR ...

javascriptjqueryhtmlclipboard

Tips for utilizing flexbox to establish a maximum width and prevent abrupt layout changes when incorporating media queries

I am facing an issue with my responsive design using flexbox. On mobile, my 3 boxes containing products named Ragnar, Thor, and Odin look great. However, when I switch to tablet or desktop view, the boxes suddenly grow larger due to the media query set wit ...

htmlcssresponsive-designmedia-queries

The Regex.Replace function is not functioning as expected

I am currently faced with the challenge of replacing HTML tags within a string. For example, I need to convert <strong>text</strong> to <b>text</b>, among other similar replacements (although I understand that the b tag is considere ...

c#htmlregexstring

Problem with the overflow setting of a specific div

My website is currently hosted on a test server at medexcel.comeze.com. However, I am encountering an issue where the overflow of the top div is no longer hidden when I hover over a menu button in the top bar. This results in the bottom right corner of th ...

jquerycss

React and Mui are experiencing a peculiar issue where a background is mysteriously missing from a component in a specific location

Exploring React 16 and functional components with hooks Discussing Mui 4 framework Adding a background pattern to multiple login pages seems simple, right? Here is an example of a login page component: return ( <Box width={1} height={1}> ...

cssreactjsmaterial-uibackground

Retrieving the Href attribute from a designated div class with JQuery

I'm currently developing a Google Chrome extension where I need to extract the source code of a webpage using a jQuery get function. Here is how I implemented it: $.get(link,function(data){ // The entire source code of the link will be stored in the ...

jqueryhtml

What are some methods to achieve consistent alignment of input fields across different mobile devices using CSS?

I have been working on a login page that looks good on desktop and laptop devices. However, I am facing an issue with its display on mobile devices. The design appears differently on various mobile devices - for instance, it looks acceptable on an iPhone 1 ...

htmlcsscakephp-2.0