How do I give text or an image a transparent background using CSS

0 votes
I want to select and set up a background image for the home page but however, despite the width being filled, the height is not by getting the image from the beginning of the screen. Is there a shortcoming in the code? Have I been missing the standard for images on flutter? Is there a difference of the screen resolutions depending on a person's mobile phone and do the images scale accordingly?

class BaseLayout extends StatelessWidget{ 
@override 
Widget build(BuildContext context){ 
return new Scaffold( 
body: new Container( 
child: new Column( 
mainAxisAlignment: MainAxisAlignment.start, 
children: [ 
new Image.asset("assets/images/bulb.jpg"
) 
]
)
)
);
}
}
Feb 1, 2022 in HTML by Soham
• 9,700 points
401 views

1 answer to this question.

0 votes

In order to ensure that your image has filled your entire screen, you could try to use a Decoration Image with a fit of BoxFit.cover for example:- 

class BaseLayout extends StatelessWidget{ 
@override 
Widget build(BuildContext context){ 
return Scaffold( 
body: Container( 
decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/images/bulb.jpg"), 
                        fit: BoxFit.cover, 
), 
), 
      child: null /* add child content here */, 
),
);
}
}
answered Feb 8, 2022 by Rahul
• 9,670 points

Related Questions In HTML

0 votes
0 answers

Transparent box or an image with HTML or CSS

I have no idea about creating a ...READ MORE

Jul 4, 2022 in HTML by Tejashwini
• 3,470 points
83 views
0 votes
0 answers

How do I create an HTML button that acts like a link?

How can I make a button in ...READ MORE

Jul 8, 2022 in HTML by Tejashwini
• 3,470 points
85 views
0 votes
0 answers

How do I style a <select> dropdown with only CSS?

Is it possible to style a choose> ...READ MORE

Jul 29, 2022 in HTML by Tejashwini
• 3,470 points
124 views
+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,840 points
3,402 views
0 votes
0 answers

How to do calculation in PHP using a csv file for retrieving data?

Morning, I have a csv file and i ...READ MORE

Feb 11, 2020 in HTML by anonymous
• 140 points
1,016 views
0 votes
0 answers

How to hide image broken Icon using only CSS/HTML?

I need to hide this error image/ ...READ MORE

May 27, 2022 in HTML by Tejashwini
• 3,470 points
251 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,420 points
2,471 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,420 points
487 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,420 points
3,085 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,420 points
291 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP