Questions tagged [background-image]

The background-image CSS property sets one or more background images for an element.

Filter by
Sorted by
Tagged with
-2 votes
0 answers
32 views

My html and css code doesn't show the background image when i open it in a webpage

i've added the background-image: url("path-to-image") in css under my class name and i made sure it matched the class id written in html yet when i try to open the webpage it doesn't display ...
mohdaqel's user avatar
0 votes
0 answers
16 views

Separate Background Image Slider for Desktop, Mobile and Tab View

I want to add Multiple Image for Mobile and Tab View on <div class="slide-item large"> This is the actual code. I want to add image from another admin site. <section class="...
Pavel's user avatar
  • 1
0 votes
0 answers
21 views

Data URI in background-image is rewritten (and broken) upon Angular 15 build for production

Some context I have an Angular application, using Material Angular. I just migrated from Angular 13 to 15 using Angular CLI (I did go through the Angular 14 update as a step, of course). I also ...
Stephe's user avatar
  • 25
-1 votes
1 answer
21 views

Does adding background image in a webpage slows down its loading?

I am a beginner to coding and i recently built a webpage.I noticed that it takes much time to load the background image wehereas the contents of the website are alerady loaded. Is it because i ...
Shashank Sinha's user avatar
0 votes
0 answers
24 views

I can't change background image, tailwind nextjs

i' ve tried all the possible ways to change my app background with an image but can't succeded, i'm using next 14 with tailwind. Here is one example of how i've tryed to change the background: //page....
Pepitos333's user avatar
0 votes
1 answer
64 views

how can i achieve a background like in css given this kind of images?

I'm just learning HTML and CSS.So,I was given a design but i don't know how to design the background image part because there are two very large background image.Here's the design and using the ...
Adebimpe Abdulhamid Eniola's user avatar
-1 votes
0 answers
54 views

How to use CSS to this border effect [duplicate]

First: resource background image (PNG): https://i.imgur.com/pyYfyit.png (SVG): https://jmp.sh/s/emDkCSycZ7dfNoAOODAb And Second effect(blue part is uncertain width): resource background image (...
riskers's user avatar
  • 178
0 votes
0 answers
20 views

firefox renders unexpected, using background-image linear-gradient and background-size

I want to use css to make grid background my css code is below: background-image: linear-gradient(to right, var(--gantt-main-color-split) 0, var(--gantt-main-color-split) 1px, transparent 1px, ...
supergem3000's user avatar
0 votes
0 answers
21 views

Email HTML Template, showing background image and not as an attachment

In the email template that I am writing, I would like to have the image shown as my background image, because I would like to overlay some text on it. The email working as expected in other email ...
Coarray's user avatar
0 votes
1 answer
27 views

Is there a way to make a background image that's exclusively to Safari?

My Tumblr blog is now using a background image with background-attachment:fixedIt works perfectly on Windows and Android However, according to caniuse.com (link to article) this property works for ...
diacetyl's user avatar
0 votes
0 answers
25 views

Place an image with plotly.js

I want to color an image in ZAXIS instead of the brown color, but I have only been able to color the background with colors My code in javascript import React, { useState } from 'react'; import Plot ...
Wilmer Solano's user avatar
0 votes
1 answer
36 views

Background-image not taking full width on resizing

I'm building my first website (it's a portfolio), I created 3 different background image for each section that alternate (home, about, skills, etc.). I'm using SASS (SCSS syntax) and I noticed that ...
DiaDario's user avatar
1 vote
1 answer
35 views

flutter splash screen issue always shows flutter splash first ,then only app splash screen works, used flutter_native_splash library but no use

flutter splash screen issue always shows flutter splash first ,then only app splash screen works, used flutter_native_splash library but no use my splash screen contains background image with ...
NanibucKer's user avatar
-1 votes
1 answer
51 views

background image scaling. with changing the size accordingly

Im making a website and i want to have an image in the background. but using it just in background-image makes it so that its glued to the sides of the window and if i would switch to the phone it ...
Ksylerek Krowny's user avatar
0 votes
0 answers
35 views

Images randomly disappears from browser view

I just started learning CSS and I need your help. I started to write the code and everything looked correct and beautiful, images were on place. Then I took a 20min pause, came back to the pc, browser ...
Amellygg's user avatar
0 votes
1 answer
58 views

CSS background-image in Chrome is pixelated when resized

I realized Chrome renders the CSS background-image differently from <img />. Two same images resized to the same size the first with CSS background-image is pixelated the second with <img /&...
uiii's user avatar
  • 469
1 vote
1 answer
80 views

How can i make background image show in mobile version of my code after using media query?

I am a beginner learning HTML and CSS. I'm currently working on a project and I am utilizing media query. I have design the desktop version first because that looks easier to me. So why designing the ...
Adebimpe Abdulhamid Eniola's user avatar
0 votes
2 answers
41 views

When using position absolute inside ::before selector it's not working

I was trying to set my background image using the ::before selector and I used position absolute but when i inspected the same in the browser it shows the position as absolute but I'm not able to use ...
ashCold's user avatar
-1 votes
2 answers
51 views

How do I get an image to appear behind the header?

I am currently working in HTML and CSS. I need to make an image the background of the header. #banner { padding: 60px; text-align: center; background-image: url("https://via.placeholder.com/...
AlexArgent's user avatar
0 votes
0 answers
25 views

How to export Excel range to an image with specific width, height . (image used as background in IOBEYA)

I need to import a background image to Iobeya. This background is a range from an Excel sheet. Here is the code used to do the export with VBA. Sub RangeToPicture(rPrt as Range, fileName As String) ...
JPK's user avatar
  • 1
1 vote
1 answer
28 views

Prevent gradient from repeating, if that is what it is doing here

What exactly will work to fix that? I tried adding: background-repeat: no-repeat; That did nothing. In the image I provided, you can see the gradient repeating itself. How do I prevent that? image ...
Samantha Ruth's user avatar
0 votes
1 answer
38 views

Tailwind problem backgroundImage not loading

I have a problem with tailwind. I'm working with React and i wanted to chnage the image with a map and the id so i did a .json file: [ { "id": "1", "title": &...
coco Fox's user avatar
0 votes
0 answers
31 views

Slideshow lag between image and text when leaving and returning to page

Vegas slideshow lag between image and text when leaving and returning to page I am using the Vegas JavaScript library to create a slideshow on my website. The slideshow works fine when I stay on the ...
nechmi bader's user avatar
0 votes
1 answer
55 views

Offset Background Image

How do I offset background image in such a way that the background only reveals the bottom half of the image from the top of the parent container while the other top half of the image is hidden as if ...
Innocent Victor Mark's user avatar
0 votes
1 answer
50 views

How do I add a background image to an empty anchor tag without my text being displayed over the image?

I am trying to put a background image on an empty anchor tag and display text 20px below that image. This is within a flexbox so that it is responsive as I resize my screen. Both the images and the ...
ellekatdub's user avatar
0 votes
1 answer
42 views

add kenburns effect on background image in css

here is my css #form1 > div:nth-child(3) > div > div.wel-video { background: url(images/dahua.jpg) no-repeat !important; /* Make image center */ background-position: center center !important; ...
mark antony's user avatar
-3 votes
1 answer
45 views

html -Making an image the background image on mouse click? [closed]

I don't have any code for this because I am fully stuck and unsure where to begin. The concept is simple enough - I want to be able to click an image (from several others on the page) and have it ...
user22607169's user avatar
0 votes
0 answers
31 views

Div background-image is not shown in print preview

Well i have the below code where div background-image and another image over background-image is not showing in the print preview. All text fields are shown up except image and background-image. I ...
usman610's user avatar
  • 477
0 votes
0 answers
23 views

background-image behind and in front of a shade divider

Hi I would like to make a bg-img wirth landscape and a truck in front of it. over this I would like to have a diagonal black line with "shade divider" and then I like to have the truck from ...
smiling's user avatar
0 votes
2 answers
46 views

Cannot Change backgound image using javascript though the image change is shown in console?

hello people i am trying to change background images on a interval of 3 seconds using javascript the code seem to be correct because the images can be seen changed in the console but not on the screen ...
Ayush Sharma's user avatar
0 votes
0 answers
93 views

Creating background-image in html to pdf conversion

I will convert my html page to pdf format with dinktopdf and get the a4 output from the printer. I'm converting html content to string, but backgorund-image are not show in display. how can I do that? ...
nikki's user avatar
  • 25
0 votes
0 answers
16 views

CSS: auto-size a html "div" so width is set by the container and the height is automatically set to maintains aspect ratio of the background image

I'm trying to create a picture frame around an image. I am trying to use css "Border-image". I would also like to have both a inner and outer shadow for the picture frame. I'm trying to use ...
Shaky's user avatar
  • 3
0 votes
0 answers
50 views

Background size in percent works like cropped contain in iOS

This is my code: height: 600px; width: 100%; background-repeat: no-repeat; background-attachment: scroll; background-position: right bottom; background-image: url(https://someserver.com/image.png); ...
Sogl's user avatar
  • 792
0 votes
1 answer
28 views

my className={`...${getBackDropPach()}...`} not working [duplicate]

i can't get backdrop_path URL from TMDB API. i use function getBackdropPath() to get image from TMDB API. Althought my console.log(getBackdropPath(movie.backdrop_path)) led me to axactly URL images ...
Thắng Vũ's user avatar
1 vote
1 answer
67 views

Background Image not showing despite having correct path as URL

I'm trying to add a background image in my React Project, but it's not showing up despite having correct relative path as URL. Here is my "App.js": import "./styles.css"; ...
Fuaad's user avatar
  • 330
-1 votes
1 answer
151 views

Applying Hover Effects to React Cards with Dynamic Background Images

I'm working on a React project where I have a set of cards, each with a dynamic background image loaded from a JSON file. My goal is to create a hover effect on these cards, where the background image ...
Artcchi's user avatar
0 votes
1 answer
178 views

How to design a picture in WinUI 3 that automatically adapts to the window

I'm doing a little software with Winui 3, and now I'm designing the homepage, and I'm hoping to make a scalable image like the Winui 3 Gallery homepage,but now I can't find any lessons or documents ...
Sciencekill's user avatar
0 votes
1 answer
37 views

CSS: Why doesn't calc(contain * 0.66) work?

I have two layered background images that need to be sized with contain in order to display correctly at all responsive breakpoints. When I was specifying background-size using percentages I found ...
Mentalist's user avatar
  • 1,530
0 votes
1 answer
91 views

Why are opacity wrapping my main content?

I want to have a background image in my main section. Then there will be an empty div below it. It will have an opacity of 0.8. Below that there will be a div that will contain my content and that ...
constobidullah's user avatar
0 votes
1 answer
148 views

In Chakra UI how to build a divider that uses a background image?

In Styled Components to build a div separator that implements an image background I've used: const Separator = styled.div` margin-bottom: ${({ theme }) => theme.spacings.normal}; mask-image: ...
DᴀʀᴛʜVᴀᴅᴇʀ's user avatar
0 votes
0 answers
112 views

Angular 15 - SCSS background image fetch from assets folder returns 404

I am facing a weird issue when trying to load an image file from assets directory to SCSS file. Even it is not working in the inline style. .register-form-container { background-image: url("/...
user3384985's user avatar
  • 2,987
-1 votes
1 answer
42 views

background image overflow / image overlap other components

this centre logo (background image) is a circle shape. It overlaps the border line on the left side. I tried to apply overflow: hidden, clip, auto on the div as well as the image itself but still does ...
Matthew Moon's user avatar
-2 votes
1 answer
318 views

How to change a background image in javascript?

(excusing for my bad english) I have a couple of divs. They all should have the same background image. So I've given them the same class. in style.css I set the background image for this class by URL. ...
Bezaron's user avatar
0 votes
1 answer
54 views

Background is repeating only on Chrome - even after adding 'no-repeat'

I need find out why my background is repeating in my CSS even after using no repeat. I'm trying to avoid using background cover, as it distorts the image. This is only happening on Chrome. https://...
NatalyHelps's user avatar
1 vote
1 answer
18 views

Set an "odd" image as a responsive full screen background, showing the entire image in React/RedwoodJS

Somewhat odd request here - I need to set an image as a background, for which I would normally use cover, but I need all edges of the image visible at all times (image attached). I've tried all the ...
Nick Matthews's user avatar
0 votes
0 answers
60 views

Change background image on hover on Revolution Slider

I would like to replicate the way background images change and start the zooming animation whenever the mouse hovers over the a particular element, exactly like this. Anyone with some expertise in CSS ...
at_oussama's user avatar
2 votes
0 answers
126 views

Color banding on Firefox

Today I switched over to Firefox but I noticed that on my website the color gradients are banded and it looks quite ugly. Color banding, especially noticeable in areas such as the main paragraph box, ...
4194304's user avatar
  • 21
0 votes
0 answers
34 views

Backround Gif non displaying in Github Pages website

I'm hosting a website with GItHub Pages. In my index.html file, i have a section called 'hero'. Here is the code: <section id="hero" style="background-image: url(./assets/img/gif.gif);"> ...
Gabbo144's user avatar
0 votes
3 answers
65 views

Set a background picture to a DIV that changes based on screen size

I am trying to get a hero image on a website. I would like the hero image to switch between a mobile and full image version, so I decided to go with background-image instead of I can't get the image ...
user22321262's user avatar
0 votes
1 answer
23 views

Background image doesn't yield 100% height on mobile

You can visit https://anchor.hecker40.repl.co on mobile to see that part of the background image is white. I've been trying everything to make it full height, but it just isn't working. @media (max-...
Jeffrey Chen's user avatar

1
2 3 4 5
121