Questions tagged [background-image]
The background-image CSS property sets one or more background images for an element.
6,016
questions
-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 ...
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="...
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 ...
-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 ...
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....
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 ...
-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
(...
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, ...
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 ...
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 ...
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 ...
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 ...
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 ...
-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 ...
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 ...
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 /&...
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 ...
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 ...
-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/...
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)
...
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
...
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": &...
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 ...
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 ...
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 ...
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;
...
-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 ...
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 ...
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 ...
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 ...
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?
...
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 ...
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);
...
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 ...
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";
...
-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 ...
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 ...
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 ...
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 ...
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: ...
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("/...
-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 ...
-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. ...
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://...
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 ...
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 ...
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, ...
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);">
...
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 ...
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-...