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 in HTML by Soham
• 8,730 points
80 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 by Rahul
• 8,980 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

3 days ago in HTML by Tejashwini
• 680 points
4 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,720 points
2,978 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
856 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 in HTML by Tejashwini
• 680 points
35 views
0 votes
0 answers

How to insert spaces/tabs in text using HTML/CSS

how to add space in HTML except ...READ MORE

Jun 3 in HTML by Tejashwini
• 680 points
14 views
0 votes
0 answers

how to display an image inside SVG circle in html5?

is there a way to display an ...READ MORE

3 days ago in HTML by Tejashwini
• 680 points
4 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,360 points
1,615 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,360 points
391 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,360 points
2,499 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,360 points
210 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP