Using CSS3 to generate dots on top of an image with no need for a div container

While browsing through the Nintendo Online website, I noticed an interesting post image with tiny dots created using CSS. This inspired me to achieve a similar effect, but without enclosing the image within a div container.

Below is my current code snippet:

.image {
  background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}
<img class="image" src="http://media2.giga.de/2013/06/osx_hero_2x.jpg" height="250" width="500px">

I am wondering what modifications are required to make the dots visible on the image. When I tried setting the z-index to 1, the image moved up a level. Is achieving this effect without using a div container possible?

css

Answer №1

Try using the pseudo-elements :before or :after

Check out this example on jsFiddle

div {
  background: url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) repeat;
    position: relative;
    min-height: 200px;
    -webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
div:before{
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}
<div></div>

Answer №2

To achieve the desired effect, simply include multiple URLs in the background css property

.image {
  background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat, url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) no-repeat;
}

View the result here

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

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

htmlcssfirefox

Updating pictures on Bootstrap's project showcase template

I attempted to modify the source of an image by clicking on smaller ones using bootstrap’s template found at . Despite my efforts, I have not been able to achieve the desired result. (Any help is greatly appreciated!) I included id="myImage" on the main ...

javascripthtmlcss

Display a division upon clicking a hyperlink with a specific class

My goal is to display/fade in a <div> with an ID of "signInHold" when the <li> "Sign In" is clicked, utilizing the class signInActive on the <li>. <ul class="nav1"> <li class="nav2"> <a href="http://rocketcss.c ...

javascripthtmlcssajax

Organizing elements in flexbox with Bootstrap: A guide to wrapping order and

While I am using bootstrap 4 to build a top nav, this question is not necessarily specific to bootstrap. The challenge I am facing involves controlling the wrapping behavior of components in the top nav as the screen width changes. I am struggling with ac ...

twitter-bootstrapcssflexboxbootstrap-4

The page width seems incredibly wide right now, and I'm having trouble pinpointing which CSS element is responsible for this

My website is on Wordpress and the page widths seem to be too wide. I have tried looking for the culprit in the code, but so far no luck... ...

htmlcsswordpress

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript. If you would like to take a look at the code and see a working example, please visit this link: You can also view just the gist here: https://gist.github.com ...

javascriptjquerycssanimationwebkit

Sometimes the Navbar options fail to show up consistently on the Navbar bar

I recently launched my website at campusconnect.cc Unfortunately, I've noticed that when resizing the window, the navbar options are shifting up and down. Can anyone help me identify the issue and provide guidance on how to resolve it? ...

javascripthtmlcsstwitter-bootstrap

In HTML, utilize the "clone" div class

Upon inspecting the element of my website, I have observed that the top-header div contains a duplicate. Why did this occur? How can I eliminate the clone and retain the original div top-header? Visit my site Below is the HTML code: <div id="top-h ...

phphtmlcsslayout

Learn how to extract an entire table from a website using Kimono Labs, rather than just the first ten rows

Currently, I am utilizing Kimono labs to generate an API for scraping data from the table on this specific website. However, the website only displays the initial 10 rows of the table by default, limiting my API output to just 10 rows. Is there a method to ...

javascriptcssweb-scrapingkimono

Is it possible to align text to an image within an input text field?

<input type="text" class="usernm" style="color:black;font-weight: bold;outline-width: 0;" id="username" /> I have a question about styling HTML. I am attempting to include an icon inside a text field, but I'm strugglin ...

csshtmlcss-position

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

javascriptjqueryhtmlcssjquery-animate

Is there a way to ensure that spans are inline with a div?

My structure is pretty straightforward: <div></div><span></span><span></span> However, I'm looking to have them all appear on a single line. Currently, they are rendering like this: <div /> <span />&l ...

csshtml

Can you tell me the name of the scrolling effect used for the background on this website?

Hello everyone, I have a question to ask. Be gentle with me as this is my first time posting here. I've been learning CSS3 and recently came across an effect that caught my eye. I'm not sure if it falls under the category of parallax scrolling or ...

css

Effective method for centering a navigation bar vertically within a section element without relying on absolute positioning

Let's explore a unique way to vertically center content within a div while steering away from fixed values. Interestingly, the typical solutions don't always work as expected in a section environment. The challenge now is: How can we center the ...

htmlcss

Is it possible to implement browser-specific CSS in Next JS without affecting other browsers?

Will Next JS automatically add all necessary browser prefixes to CSS styles defined with style jsx, or do I need to write the browser supports manually in my styles when using Next JS? transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); ...

cssnext.jswebkit

Tips for enhancing the appearance and functionality of an HTML form

Seeking advice on enhancing the styling of an HTML form I am developing for a course project. I'm particularly struggling to align the descriptors of radio buttons with their respective buttons. Any suggestions or guidance would be highly valued! I h ...

htmlcssforms

Two liquid level divs within a container with a set height

I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...

javascripthtmlcss

Switching Present Tab in Rails

Within my application, I have a set of tabs displayed at the top thanks to a general layout in application.html.erb. Here's how they are structured: <li class="current"><%= link_to "Home", provider_path(current_user.id), :method=> "GET"%& ...

ruby-on-railscssdom

What would you suggest as a more effective method for preventing content overlap during multi uploads?

Recently, I was working on a Wordpress site and used the Ninja Forms plugin to create a form. One of the challenges I encountered was styling the file upload button. After some research, I came across a tutorial that provided a great solution that worked a ...

jquerycssformsfile-upload

Failure of Outlook 2007, 2010, and 2013 to Recognize Conditional CSS

I am currently working on a design for a responsive email. The layout is functioning well in all email clients tested using Litmus, except for Outlook 07/10/13 due to its challenging word rendering engine versions. To ensure correct display across differen ...

htmlcssoutlookhtml-emailconditional-statements